숨기면 안되는 섹션을 숨기는 것을 피하는 방법은 무엇입니까?

Question

여기까지 지금까지 가지고있는 것의 demo입니다.

내가 접근하려는 것은 클릭 할 때마다 표시되는 정보 목록을 숨기는 것입니다.

모두 ul 목록에 ul 개의 하위 요소가 포함되어 있습니다 (예 : li).

지금까지해야 할 일 : 부모 li을 클릭하면 ul 자녀가 숨기거나 표시됩니다.

그러나 문제는 내가 li 안에 이미있는 ul이 부모 ul 가죽 내부 li 클릭 할 때이다.

어떻게 이런 일이 발생하지 않도록 할 수 있습니까? 이 작업을 수행하는 더 좋은 방법이 있습니까?

나는 정말로 js에 익숙하지 않지만 나는 아직도 배우고 있고, 너희들이 나에게 가르쳐 줄 수있는 것을보고 싶다.

미리 감사드립니다.

PD : 그것은 물어 너무 많이하지 않으면, 내가 정말 순수 JS 그래서 내가 그것을 (더 배울 수 대답 할 감사하겠습니다 :. 이벤트 전파에서

Answer 1

문제의 arrises 무엇을 당신의 피들에서 일어난 일은 아이가 클릭되었을 때 이벤트가 부모에게 전파되어 모든 것을 숨기는 것이 었습니다. 부모 리가 열렸을 때 두 번째로 열리는 것을 눈치 채 셨을 수도 있습니다. Here은 서로 다른 브라우저에서 이벤트가 발생하는 방식에 대한 설명 링크로 이동하십시오.

IE 버전 < 9. This modification to your fiddle을 제외하고는 코드가 작동해야합니다. 유일한 차이점은 내가 대한 추가 정보를 원하시면

event.stopPropagation(); 

체크 아웃 모질라의 event.stopPropagation 문서로, 부모 리튬에 자녀 리에서 전파 이벤트를 중지하고 있다는 것.

Answer 2

<div class="clpsble-area"> 
    <ul onclick="clpsble(event)"> 
     <li class="collapser">Rand Stuff 1 
      <div class="clpsble-sec hide"> 
       <ul> 
        <li class="collapser">Rand Stuff 1.1 
         <div class="clpsble-sec hide"> 
          <ul> 
           <li>Rand Stuff 1.1.1</li> 
           <li class="collapser">Rand Stuff 1.1.2 
            <div class="clpsble-sec hide"> 
             <ul> 
              <li>Rand Stuff 1.1.2.1</li> 
              <li>Rand Stuff 1.1.2.2</li> 
             </ul> 
            </div> 
           </li> 
          </ul> 
         </div> 
        </li> 
        <li>Rand Stuff 1.2</li> 
       </ul> 
      </div> 
     </li> 
     <li>Rand Stuff 2</li> 
    </ul> 
</div> 

<script> 
    function clpsble(e){ 
     for(el in e.target.children)el.style.display=el.style.display==='hidden'?'block:'hidden'; 
    } 
</script>