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

您需要返回 false。

发生的情况是因为您的列表位于另一个列表中，所以它触发了每个列表的点击事件。通过添加 return false，它只会在第一个时触发。

示例位于 http://jsfiddle.net/4yyau/