使用jQuery在hiearchy结构中折叠嵌套列表

我有一个非常恼人的问题，这可能是我对javascript和jQuery知之甚少的产物。使用jQuery在hiearchy结构中折叠嵌套列表

我有一个使用递归来实现层次结构的列表，它看起来如下

$(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）指向点击的列表元素...？

现在已经在这里很久很久了，会喜欢一些帮助！

来源

2014-09-22 mpma

'id's _must可以在文档中unique_。改用'class'。 – Teemu 2014-09-22 07:09:56

id是唯一的 - Look id foo – 2014-09-22 07:10:09

这里你去...没有改变的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>

来源

2014-09-22 07:26:08 MarsOne

非常感谢！它现在解决了！ – mpma 2014-09-22 08:09:50

使用jQuery在hiearchy结构中折叠嵌套列表

回答

相关问题