Переключение ссылок в меню?

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 даже если он вызывается на несуществующих элементах. Это означает, что ваше состояние ifif ($(this).next('ul').toggle()) всегда будет пройти.

Изменить это:

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

Working demo