css – 禁用下拉菜单项使用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>

我想要能够使菜单项显示为禁用，即没有悬停效果，并且可能是不同的文本修饰，以使得禁用状态对用户可见。

什么是最好的方法来完成这个？是否有一个现有的引导css类，我可以添加到< li>或< 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

css – 禁用下拉菜单项使用twitter bootstrap

解决方法

相关文章