jquery - jquery简单的可折叠列表问题

Question

我正在尝试创建一个简单的可折叠多层，其中每个 ul 都是可折叠的。我很难弄清楚我做错了什么。我的脚本是jsfiddle

<ul id="usernav">
<li>Manage
    <ul >
        <li >child11
         <ul>
             <li> some1</li>
             <li> some2</li>
         </ul>
        </li>
        <li>child12</li>
    </ul>
</li>
<li>Subscriptions
    <ul>
        <li>E-Briefings</li>
        <li>E-Briefings Subscriptions</li>
        <li>Knowledge Briefings</li>
    </ul>
</li>
  <li>Media Store
    <ul>
        <li>Image Store</li>
        <li>Document Store</li>
        <li>Media Store</li>
    </ul>
</li>

我的脚本是

 $('#usernav').find('ul').hide();    
$('li').click(function() {
    $(this).children('ul').toggle();
});

Answer 1

当您单击一个元素的子元素时，您也在单击该元素。因此，当您单击 child 时li，该事件也会在 parent 上触发li。用于stopPropagation()防止事件冒泡。

http://jsfiddle.net/nrVYn/

$('#usernav').find('ul').hide();

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