使用jQuery在hiearchy結構中摺疊嵌套列表

Question

我有一個非常惱人的問題，這可能是我對javascript和jQuery知之甚少的產物。

我有一個使用遞歸來實現層次結構的列表，它看起來如下

$(function(){ 
 
    $('#foo').click(function() { 
 
     $(this).children('ul').slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id='foo'>A 
 
     <ul> 
 
      <li id='foo'>B 
 
       <ul> 
 
        <li> 
 
         Sub-sub 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

我試圖完成一個崩潰的功能，這樣當上「A用戶點擊'所有孩子的元素崩潰了，如果她點擊'B'節點，B孩子的所有孩子都會崩潰。但是，無論如何我總是試着讓所有的id ='foo'列表崩潰。在我眼裏，$（this）.children（'ul'）。slideToggle（）;會摺疊孩子，因爲$（this）指向點擊的列表元素...？

現在已經在這裏很久很久了，會喜歡一些幫助！

Answer 1

這裏你去...沒有改變的HTML。但是，像其他的建議，你需要有唯一的ID的

$(function(){ 
 
    $('li').click(function(event) { 
 
     event.stopPropagation(); 
 
    $(event.target).children('ul').slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id='foo'>A 
 
     <ul> 
 
      <li id='foo'>B 
 
       <ul> 
 
        <li> 
 
         Sub-sub 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>