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/

的示例