子菜單鏈接不能在多級jQuery菜單上工作

Question

即時通訊工作在一個非常簡單的「多級菜單」與jQuery。

Here is the code

的.sub-nav中的鏈接無法點擊，因爲父li是在他們之上。 ¿有什麼幫助？

謝謝！

Answer 1

綁定單擊事件以鏈接<li>元素，點擊後獲取此鏈接元素的父級，然後滑動切換sub-nav。

試試看。 ）

編輯：

我與下一個（）jQuery選擇使得它：這裏的js代碼：

$(document).ready(function(){ 
    $('.nav > li > a').click(function(e) { 
    e.preventDefault(); 
    $(this).next().slideToggle(); 
}); 
}); 

注意>防止點擊<li>元件自身滑動。基本上說，我想和.nav類，作爲直接子元素的<li>直接子的點擊鏈接的事件。

Answer 2

在這裏你的代碼。我添加類鏈接到一個具有真正的內容鏈接，寫了一個函數爲他們

$(document).ready(function(){ 
 

 
\t $('.nav li:has(ul)').bind('click', function(e){ 
 
\t \t e.preventDefault(); 
 
\t \t $(this).children('ul').stop().slideToggle("fast"); 
 

 
\t }); 
 

 
    $('li a.link').on('click', function(e){ 
 
    alert('clicked'); 
 
    e.stopPropagation(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
     <h1>Page title</h1> 
 
     <ul class="nav"> 
 
      <li><a href="#">Obras</a> 
 
      <ul class="sub-nav"> 
 
       <li><a class="link" href="http://www.google.com.ar">Series</a></li> 
 
       <li><a href="#">Series</a></li> 
 
       <li><a href="#">Series</a></li> 
 
       <li><a href="#">Series</a></li> 
 
       <li><a href="#">Series</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">CV</a></li> 
 
      <li><a href="#">Contacto</a></li> 
 
      <li><a href="#l">Misceláneas</a></li> 
 
     </ul> 
 
     </div>

更多stopPropagation()