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

前端之家收集整理的这篇文章主要介绍了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相关文章