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

Question

我正在使用 jQuery 开发一个非常简单的 "Multilevel menu"。

Here is the code

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

谢谢！！

Answer 1

将点击事件绑定到 <li> 元素内的 link，点击时获取此 link 元素的父元素，然后滑动切换 sub-nav.

试一试。 ;)

编辑：

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

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

请注意，> 会阻止单击的 <li> 元素本身滑动。它基本上说我想绑定单击 link 的事件，它是 <li> 元素的直接子元素，它是 .nav class.[=16= 元素的直接子元素]

Answer 2

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

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

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

Submenu links doesnt work on multilevel jQuery menu

css

jquery

menu

submenu