我正在使用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;
}
这里是jsfiddle的链接。
答案 0 :(得分:1)
根据单击li
时保持下拉列表的单一要求,下面的代码将起作用。只需stop the event propagation:
$(".dropdown-menu li").click(function(e) {
e.stopPropagation();
});
答案 1 :(得分:0)
从按钮中删除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');
}
});