禁用點擊主菜單中的項目不子菜單的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')到UL發現裏面...檢查長度是否大於0 THN它下拉..沒有必要添加一個額外的類...

試試這個

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

fiddle here