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

当你点击一个元素的孩子，你也可以点击的元素。所以当你点击一个孩子li时，事件也会触发父母li s。使用stopPropagation()可防止事件冒泡。

http://jsfiddle.net/nrVYn/

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

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