отключения нажмите для пунктов главного меню не подменю JQuery

Question

HTML

<ul id="nav"> 
    <li> 
     <a href="#">Home</a> 
    </li> 

    <li> 
     <a href="#">About</a> 
     <ul> 
      <li><a href="#">The product</a></li> 

      <li><a href="#">Meet the team</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Services</a> 

     <ul> 
      <li><a href="#">Sevice one</a></li> 
      <li><a href="#">Sevice two</a></li> 

      <li><a href="#">Sevice three</a></li> 
      <li><a href="#">Sevice four</a></li> 
     </ul> 

    </li> 
    <li> 
     <a href="#">Product</a> 
     <ul> 
      <li><a href="#">Small product (one)</a></li> 

      <li><a href="#">Small product (two)</a></li> 
      <li><a href="#">Small product (three)</a></li> 
      <li><a href="#">Small product (four)</a></li> 

      <li><a href="#">Big product (five)</a></li> 
      <li><a href="#">Big product (six)</a></li> 
      <li><a href="#">Big product (seven)</a></li> 

      <li><a href="#">Big product (eight)</a></li> 
      <li><a href="#">Enourmous product (nine)</a></li> 
      <li><a href="#">Enourmous product (ten)</a></li> 

      <li><a href="#">Enourmous product (eleven)</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Contact</a> 

     <ul> 
      <li><a href="#">Out-of-hours</a></li> 
      <li><a href="#">Directions</a></li> 

     </ul> 
    </li> 
</ul> 

JQuery

$('#nav li a').click(function(e){ 
    e.preventDefault(); 
}); 

Попытка отключить, нажав на основные пункты меню, такие как О, Услуги и т.д., где они есть падать. Используя приведенный выше код, он просто отключает все мои ссылки.

Answer 1

Дайте верхний уровень связывает класс не-интерактивный а, й добавить этот скрипт:

$('.not-clickable').click(function(e){ 
    e.preventDefault(); 
}); 

Если у вас есть динамическое меню, попытайтесь определить, есть подменю, если он существует добавить класс в элемент верхнего уровня.

Редактировать: Используя класс .not-clickable, вы также можете улучшить свое будущее. Если #nav li когда-либо становится # nav2 li, вам также нужно изменить свой javascript.

Answer 2

Чтобы отключить только верхний уровень, сделать это ...

$('#nav > a').click(function(e){ 
    e.preventDefault(); 
}); 

Answer 3

попробовать это

$('#nav li > a').click(function(e){ 
    -----^-- need a space here... or else it will search for id="navli" ; 
    e.preventDefault(); 

});

обновленный

siblings('ul') использование найти уль внутри ... проверить длину, если больше 0 THN имеет выпадающее меню .. нет необходимости, чтобы добавить дополнительный класс ...

попробовать этот

$('#nav li > a').click(function(e){ 
    if($(this).siblings('ul').length > 0){ 
     e.preventDefault(); 
    } 
}); 

fiddle here