Question

我有一个bootstarp多级侧面菜单（不使用jQuery UI菜单）。不幸的是，当我点击一个子菜单项时，它的所有父项也会被触发。

这是因为我使用'嵌套'id名称嵌套了<li>个元素。我需要嵌套名称，以便轻松从数据库中获取所有子内容。 jQuery UI .menu()方法运行良好，但风格很差。所以我使用自定义侧边栏和自定义click（）事件。

如何告诉jQuery只处理一个，点击最深的<li>元素？

HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
  <li id="m1-" class="dropdown-submenu"><a href="#">Grandfather</a>
  <ul class="dropdown-menu">
    <li id="m1-1-" class="dropdown-submenu"><a href="#">Father</a>
    <ul class="dropdown-menu">
       <li id="m1-1-1" ><a href="#">Son</a></li>
    </ul>
    </li>
  </ul>
  </li>
</ul>

Javascript （处理点击以“m”开头的ID，即菜单项）

$("li[id^='m']").click(function(){
  //my code to handle the click
});

是的，我现在看到'm'预加词不是正确的预加词，应该像'菜单'更独特。我稍后会修复它。

Answer 1

您可以阻止事件从处理程序传播，以便祖先元素的处理程序不会被执行

$("li[id^='m']").click(function(e){
  e.stopPropagation()
  //my code to handle the click
});

Answer 2

嗯，你可以阻止事件冒泡;

$("li[id^='m']").click(function(ev){
  //my code to handle the click
    ev.stopPropagation();
});

Answer 3

使用stopPropagation来防止冒泡事件

 $("li[id^='m']").click(function(e){

    e.stopPropagation();
      //my code to handle the click
    });

注意：在您的dom结构中，与另一个li嵌套...当您点击时可能会出现冒泡事件

Answer 4

尝试：

$("li[id^='m']").click(function(e){
    e.stopPropagation();
    e.preventDefault();
});

嵌套<li>：仅针对已点击的最深</li> <li>点击事件</li>

4 个答案: