CSS 使用 twitter bootstrap 禁用下拉菜单项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9682082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabled dropdown menu items using twitter bootstrap
提问by codeape
I use markup to display a dropdown menu using Twitter Bootstrap.
我使用标记来显示使用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>
I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.
我希望能够使菜单项显示为禁用状态，即没有悬停效果并且可能使用不同的文本装饰以使用户可以看到禁用状态。
What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li>or <a>element?
实现这一目标的最佳方法是什么？是否有可以添加到<li>or<a>元素的现有引导 css 类？
采纳答案by Andres Ilich
You can attach a custom disabled class to your menu link atag that you want to disable and simply remove the default action by using preventDefaultand targetting that class, like so:
您可以将自定义禁用类附加到您a要禁用的菜单链接标签，并通过使用preventDefault和针对该类简单地删除默认操作，如下所示：
$(".disabled-link").click(function(event) {
event.preventDefault();
});
Then you can style all events from the .disabled-linkwith a grey backdrop or any style you like;
然后，您可以.disabled-link使用灰色背景或您喜欢的任何样式来设置所有事件的样式；
CSS
CSS
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
background-color:#d9d9d9 !important;
color:#aaa !important;
}
回答by Aeomer
When outputing the code for a disabled drop down, why not simply use :
在输出禁用下拉列表的代码时，为什么不简单地使用：
<li class='disabled'>
<a href="#">Menu</a>
</li>
You can always add the caret back if you still want it to appear.
如果您仍然希望它出现，您可以随时将插入符号添加回来。
Update:
Adding W3Schools Link
更新：
添加W3Schools 链接
回答by Alexey Petrushin
I prefer this (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;
}
}
回答by David Wartell
To disable the the dropdown use:
要禁用下拉菜单，请使用：
$('.dropdown-toggle').addClass('disabled');
To enable it back:
要重新启用它：
$('.dropdown-toggle').removeClass('disabled');
回答by osensoy
YES, Bootstrap has a predefined class with all necessary styling you need. You can simply add disabledclass to whichever <li>you want
是的，Bootstrap 有一个预定义的类，其中包含您需要的所有必要样式。您可以简单地将禁用的类添加到<li>您想要的任何一个
回答by Buzzy
Just to add to Andres answer (don't have enough reputation to add comments :( ). You need to return false from the event handler or it might continue executing other handlers.
只是为了添加到 Andres 的答案（没有足够的声誉来添加评论:(）。您需要从事件处理程序返回 false，否则它可能会继续执行其他处理程序。
$(".disabled-link").click(function(event) {
event.preventDefault();
return false;
});
回答by Cousin Richie
Similar to above you can use:
与上面类似，您可以使用：
li.disabled > a {
color:#aaa !important;
}
This way you are keeping the same bootstrap default class for disabled links and implement the preventDefault() Javascript to disabled the link.
通过这种方式，您可以为禁用的链接保留相同的引导程序默认类，并实现 preventDefault() Javascript 以禁用链接。
$(".disabled").click(function(event) {
event.preventDefault();
return false;
});
回答by Saket Uchil
<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>
Add .disabledto items in the dropdown to style them as disabled.
Source: www.getbootstrap.com
添加.disabled到下拉列表中的项目以将它们设置为禁用的样式。资料来源：www.getbootstrap.com
