如何避免隱藏不應該隱藏的部分？

Question

這是我到目前爲止所得到的demo。

我試圖達到的是有一個隱藏的信息列表只要你點擊它就會顯示。

這一切都包含在ul列表中，ul嵌套在其li元素內的子元素等等。

到目前爲止它應該做的是：當你點擊父母的li時，隱藏或顯示ul孩子。

但問題是，當我點擊一個li一個ul這已經是一個li內，這位家長ul皮內。

我該如何避免這種情況發生？有沒有更好的方法來做到這一點？

我對js並不陌生，但我還在學習，我想看看你們能教給我什麼。

在此先感謝。

PD：如果不是過分的要求，我會真的感激純JS答案，這樣我可以學到更多的它（：從事件傳播

Answer 1

您的問題棱什麼在你的小提琴中發生的事情是，當孩子被點擊時，事件也傳播給父母並隱藏了整個事物。這就是爲什麼你可能會注意到，第二次父母李被打開，孩子也會被打開。鏈接到事件在不同瀏覽器中傳播的不同方式的解釋

對於除IE版本以外的所有內容< 9. This modification to your fiddle應使您的代碼正常工作。唯一的區別是，我從你的孩子李父李傳播停止的情況下，與

event.stopPropagation(); 

退房Mozilla的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>