使用twitter bootstrap禁用下拉菜单项

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>

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

完成此任务的最佳方法是什么？是否有一个现有的bootstrap css类我可以添加到<li>or <a>元素？

Answer 1

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

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

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

更新:
添加W3Schools链接

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;
}

演示

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>您想要的任何一个