子菜单链接不能在多级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()