禁用用户能够点击 li 元素答案

【问题标题】：Disable the user being able to click on a li element禁用用户能够点击 li 元素
【发布时间】：2018-05-10 18:40:08
【问题描述】：

我正在使用引导程序并尝试禁用 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/

【问题讨论】：

Avoid dropdown menu close on click inside的可能重复
当用户点击<li>中的任何一个时你想做什么？
@Abrar，目前当我点击
时，下拉菜单关闭。我希望下拉菜单保持打开状态。

$('.dropdown-toggle').on('click', function (event) { $(this).parent().toggleClass('open'); }); $('body').on('click', function (e) { if (!$('.dropdown-toggle').is(e.target) && $('.dropdown-toggle').has(e.target).length === 0 && $('.open').has(e.target).length === 0 ) { $('.dropdown-toggle').removeClass('open'); } });