jquery - 禁用用户能够点击 li 元素

Question

我正在使用引导程序并尝试禁用 li，因此当用户单击下拉列表中的 li 元素之一时，没有任何反应。目前，当我单击顶部的 li 元素时，下拉菜单将关闭。我希望它保持开放。我发现的大部分资源都是关于禁用链接的。我想创建一个类似于 Facebook 上的下拉菜单。

这是我的html

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li id="test"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

这是我的CSS

#test{
  background-color:red;
  pointer-events: none;
}

这是 jsfiddle 的链接。

https://jsfiddle.net/aaronmk2/DTcHh/67643/

标签： jqueryhtmlcsstwitter-bootstrap

Answer 1

基于单击 时保持下拉菜单打开的单一要求，li下面的代码将起作用。只需停止事件传播：

$(".dropdown-menu li").click(function(e) {
  e.stopPropagation();
});

这是一个工作小提琴。