代码之家 › 专栏 › 技术社区 › Aaron

禁止用户单击li元素

twitter-bootstrap css html jquery

Aaron · 技术社区 · 6 年前

我正在使用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>

这是我的css

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

这里是到JSFIDLE的链接。

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

2 回复 | 直到 6 年前

James Hill 6 年前

基于单击时保持下拉列表打开的单一要求 li ,以下代码将起作用。仅仅 stop the event propagation :

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

这是 a working fiddle 。

Claire 6 年前

删除 data-toggle 属性,并使用以下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');
    }
});

小提琴: https://jsfiddle.net/DTcHh/67653/