如何禁用Bootstrap下拉菜单中li元素点击并保持菜单展开？

嘿，我懂你想要的效果——就是让某个下拉菜单项彻底“失效”，点它的时候既不跳转，也不会让下拉菜单收起来，就像Facebook那些下拉菜单的禁用项一样。你现在用了pointer-events: none，但为啥菜单还是会关？因为Bootstrap的下拉关闭逻辑是监听整个下拉区域的点击事件，哪怕你的li设了不可点击，点击事件还是会冒泡到父容器，触发菜单关闭。

给你个靠谱的解决方案，分三步来：

1. 给目标菜单项加个自定义类，方便我们绑定事件和设置样式
2. 用CSS让它看起来像禁用状态（可选但更友好）
3. 用JavaScript阻止事件冒泡和默认行为，从根源上避免菜单关闭和跳转

修改后的代码示例： #

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" class="disabled-dropdown-item"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

CSS

#test {
  background-color: red;
}
/* 让禁用项的视觉效果更直观 */
.disabled-dropdown-item a {
  pointer-events: none;
  color: #999;
  cursor: default;
}

JavaScript（依赖jQuery，Bootstrap本身也需要jQuery）

$('.disabled-dropdown-item').on('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到下拉容器，避免菜单关闭
  e.preventDefault();  // 阻止a标签的默认跳转行为
});

为啥这个方法管用？ #

• pointer-events: none让a标签本身不响应点击，但点击li的时候事件还是会往上传递，所以我们用stopPropagation()把事件“拦”在li这里，不让Bootstrap的下拉关闭逻辑触发。
• preventDefault()则确保a标签不会执行默认的跳转动作，哪怕用户点到了a标签区域。

如果你不想写JS，也可以把li里的a标签换成span，但这样语义化不太好，还是推荐上面的方法，灵活度更高，以后要调整也方便。

内容的提问来源于stack exchange，提问作者Aaron