切換菜單中的鏈接？

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