切换菜单中的链接？

Question

如何使链接只能用于子项目？

<ul> 
    <li><a href="item-1">Item 1</a> 
     <ul> 
      <li><a href="item-1-1">item 1.1</a></li> 
     </ul> 
    </li> 

    <li><a href="item-2">Item 2</a></li> 

    <li><a href="item-3">Item 3</a> 
     <ul> 
      <li><a href="item-3-1">item 3.1</a> 
       <ul> 
        <li><a href="item-3-1-3">item 3.1.1</a></li> <li><a href="item-3-1-2">item 3.1.2</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

我做了一个非常基础的例子。

$('ul').on('click','a',function(){ 

    if ($(this).next('ul').toggle()) return false; 

}); 

该分项目，如果该链接可能触发链接还没有他们不是去的位置在href，但不会工作，为什么呢？

ul li ul { 
    display:none; 
} 

实际上，这里是小提琴：nested menu

Answer 1

这是因为.toggle()将一去不复返即使它被称为上不存在的元素falsy值。这意味着您的if条件if ($(this).next('ul').toggle())将始终为通过。

将其更改为：

$('ul').on('click','a',function(){ 
    if ($(this).next('ul').length > 0) { 
     $(this).next('ul').toggle(); 
     return false; 
    } 
}); 

Working demo