Jquery 禁止用户单击li元素

我正在使用bootstrap并试图禁用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>

这里有一个指向JSFIDLE的链接

---

基于单击

li

时保持下拉列表打开的单一要求，下面的代码将起作用。简单地说：

---

以下是。

从按钮中删除

数据切换属性

，并使用以下JS解决问题：

$('.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');
    }
});

---

Fiddle:

当用户点击任何一个

时，你想做什么的可能重复？@Abrar，当前当我点击
时，下拉列表关闭。我希望下拉列表保持打开状态。可能重复$（'li'）。在（'click'，函数（事件）{//事件不会传播到文档节点，因此不会激发委派事件。stopPropagation（）；}）；
$(".dropdown-menu li").click(function(e) {
  e.stopPropagation();
});

$('.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');
    }
});