Question

我使用标记来显示使用Twitter Bootstrap的下拉菜单。

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Menu item 1...</a></li>
            <li class="divider"></li>
            <li><a href="#">Menu item 2...</a></li>
            <li><a href="#">Menu item 3</a></li>
        </ul>
    </li>
</ul>

我希望能够使菜单项显示为禁用，即没有悬停效果，可能还有不同的文本修饰，以使用户可以看到禁用状态。

实现这一目标的最佳方法是什么？是否存在我可以添加到<li>或<a>元素的现有bootstrap css类？

Answer 1

输出禁用下拉列表的代码时，为什么不简单地使用：

<li class='disabled'>
  <a href="#">Menu</a>
</li>

如果您仍希望它出现，您可以随时添加插入符号。

更新：
添加W3Schools Link

Answer 2

您可以将自定义禁用类附加到要禁用的菜单链接a标记，只需使用preventDefault删除默认操作并定位该类，如下所示：

$(".disabled-link").click(function(event) {
  event.preventDefault();
});

然后，您可以使用灰色背景或任何您喜欢的样式设置.disabled-link的所有事件的样式;

<强> CSS

a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
    background-color:#d9d9d9 !important;
    color:#aaa !important;
}

Demo

Answer 3

我更喜欢这个（LESS）：

/* Disable link */
a.disabled, 
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {  
  color: #999 ;
  cursor: default;
}
.dropdown-menu {
  a.disabled, 
  a.disabled:visited ,
  a.disabled:active,
  a.disabled:hover {  
    color: #999 ;
    cursor: default;
    background-color: white;
  }
}

Answer 4

要禁用下拉列表，请使用：

$('.dropdown-toggle').addClass('disabled');

要启用它：

$('.dropdown-toggle').removeClass('disabled');

Answer 5

是的，Bootstrap有一个预定义的类，包含您需要的所有必要样式。您只需将已停用类添加到您想要的<li>

即可

Answer 6

只是添加到Andres的答案（没有足够的声誉来添加评论:(）。您需要从事件处理程序返回false，否则它可能会继续执行其他处理程序。

$(".disabled-link").click(function(event) {
  event.preventDefault();
  return false;
});

Answer 7

与上述类似，您可以使用：

    li.disabled > a {
    color:#aaa !important;
    }

这样，您为已禁用的链接保留相同的引导程序默认类，并实现preventDefault（）Javascript以禁用该链接。

$(".disabled").click(function(event) {
event.preventDefault();
return false;
});

Answer 8

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  **<a class="dropdown-item disabled" href="#">Disabled link</a>**
  <a class="dropdown-item" href="#">Another link</a>
</div>

将.disabled添加到下拉菜单中以将其样式设置为禁用。来源：www.getbootstrap.com

使用twitter bootstrap禁用下拉菜单项

8 个答案: