jQuery: 不处理嵌入列表的事件 "Click"

Question

当我单击子菜单 link 时，此子菜单折叠（在 link 打开之前看到）。

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

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

我有这个代码：

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

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

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

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

jQuery: 不处理嵌入列表的事件 "Click"

jQuery: do not handle the event "Click" for embedded lists

jquery

menu

submenu

slidetoggle

drop-down-menu