子菜单链接在多级 jQuery 菜单上不起作用答案

【问题标题】：Submenu links doesnt work on multilevel jQuery menu子菜单链接在多级 jQuery 菜单上不起作用
【发布时间】：2016-01-22 13:35:58
【问题描述】：

我正在使用 jQuery 开发一个非常简单的“多级菜单”。

Here is the code

.sub-nav 内的链接无法点击，因为父 li 在它们上方。 ¿ 有什么帮助吗？

谢谢！！

【问题讨论】：

标签： jquery css menu submenu

【解决方案1】：

将点击事件绑定到<li>元素内的链接，点击时获取此链接元素的父元素，然后滑动切换子导航。

试一试。 ;)

编辑：

我用 next() jQuery 选择器实现了它：这是 js 代码：

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

请注意，> 会阻止单击的 <li> 元素本身滑动。它基本上说我想绑定单击链接的事件，该链接是<li> 元素的直接子元素，它是具有.nav 类的元素的直接子元素。

【讨论】：

感谢您的回答！有用！ :) > 解决了我的问题。亲爱的朋友！
总是乐于提供帮助！ :)

【解决方案2】：

这里是您的代码。我将类链接添加到具有内容的真实链接并为它们编写了一个函数

$(document).ready(function(){

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

	});

  $('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()

【讨论】：