jquery显示列表项目

Question

我有两个或多个无序列表，每个可见列表中的第一个列表项和其他隐藏列表项。

当第一个列表被点击时，它应该显示下面的所有其他li并隐藏在另一个ul中打开的其他li。

我似乎无法让它显示正确。

我无法改变我所拥有的例子中的类名，因为它们是在核心代码内部深处生成的，并用于其他元素。

感谢您的任何帮助。

http://jsfiddle.net/ukkpower/En7KV/4/

Answer 1

试试这个：

$('ul').on('click','.maincat', 
      function(e){ 
       // prevents the default click action of the a element 
       e.preventDefault(); 

       // finds the sibling elements, and shows them if hidden, 
       // hides them if visible 
       $(this).siblings().toggle(); 

       // finds the closest ul ancestor of the clicked element 
       // finds the other ul siblings of that ancestor-ul 
       // finds the '.maincat' class element's siblings that are visible 
       // hides those visible elements 
       $(this) 
       .closest('ul') 
       .siblings('ul') 
       .find('.maincat') 
       .siblings('li:visible') 
       .hide(); 
      }); 

JS Fiddle demo。

---

编辑添加引用（如下图），这注：

请注意，在jQuery 1.7中，live()方法已过时（和，因此，支持可以上可能将会删除）。对于jQuery 1.7+，使用on()方法（请参阅下面的参考资料），并在1.7之前优先推荐delegate()方法。

我对本文的参考资料是live()的API文档，请参阅参考资料。

请注意

参考文献：

• closest()。
• delegate()。
• e.preventDefault()。
• find()。
• hide()。
• live()。
• on()。
• siblings()。
• toggle()。