Question

使用jQuery处理一个非常简单的“多级菜单”。

Here is the code

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

谢谢！

Answer 1

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

试一试。 ;）

编辑：

我用next（）jQuery选择器创建了它：这里的js代码：

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

请注意，>会阻止点击的<li>元素本身滑动。它基本上说我想绑定作为<li>元素的直接子节点.nav元素的直接子节点的链接事件。

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

有关stopPropagation()

的更多信息

子菜单链接不适用于多级jQuery菜单

2 个答案: