jQuery:不要处理嵌入式列表的“单击”事件

Question

当我单击子菜单链接时，这个子菜单会崩溃(在链接打开之前就可以看到)。

如何在不向子菜单中添加类的情况下防止这种情况发生？只有在单击父元素时，我才希望子菜单展开和折叠。

我尝试添加子元素和选择器的测试条件，但没有帮助。

我有这样的代码：

​

jQuery(document).ready(function() {
  jQuery("#nav > li > ul").hide(); // hide all

  jQuery('ul#nav li').on('click', function() {
    jQuery(this).find('ul').slideToggle("slow");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
  <li>Parent-1
    <ul>
      <li><a href="#">Link-1</a>
      </li>
      <li><a href="#">Link-2</a>
      </li>
      <li><a href="#">Link-3</a>
      </li>
    </ul>
  </li>
  <li>Parent-2
    <ul>
      <li><a href="#">Link-1</a>
      </li>
      <li><a href="#">Link-2</a>
      </li>
      <li><a href="#">Link-3</a>
      </li>
    </ul>
  </li>
</ul>

​

我将非常感谢您的帮助！

Answer 1

将此添加到您的代码中:当访问者单击菜单链接时，它将防止父ULs崩溃：

jQuery('ul#nav li a').on('click', function(e) {
    e.stopPropagation();
});

演示：https://jsfiddle.net/s38tygh4/