JQuery嵌套列表的子项切换整个列表

Question

我有一个看起来像这样的列表

<ul>
   <li class="expandable">Game
     <ul>
        <li>Action</li>
        <li>RPG</li>
     </ul>
   </li>
   <li class="expandable">BBS
     <ul>
       <li class="expandable">Group 1
          <ul>
             <li>Board 1</li>
             <li>Board 2</li>
          </ul>
       </li>
       <li class="expandable">Group 2
          <ul>
             <li>Board 1</li>
          </ul>
       </li>
     </ul>
   </li>
</ul>

和一些一些JQuery代码来折叠列表.

$('li.expandable').click(function() {
    $(this).children('ul').toggle();
});

像"游戏"这样的东西可以正常工作.但是,当我单击BBS下的任何嵌套列表(如组1)时,它会导致组1和2折叠到BBS中.单击BBS会再次展开列表,并显示组1已折叠.有一个简单的解决方案吗？

Answer 1

你需要一个return false.

发生的事情是因为你的列表在另一个列表中,它会触发每个列表上的click事件.通过添加return false,它只会触发第一个.

http://jsfiddle.net/4yyau/上的示例