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

前端之家收集整理的这篇文章主要介绍了css – 禁用下拉菜单项使用twitter bootstrap前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用标记显示使用 Twitter Bootstrap的下拉菜单
  1. <ul class="nav pull-right">
  2. <li class="dropdown">
  3. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
  4. <ul class="dropdown-menu">
  5. <li><a href="#">Menu item 1...</a></li>
  6. <li class="divider"></li>
  7. <li><a href="#">Menu item 2...</a></li>
  8. <li><a href="#">Menu item 3</a></li>
  9. </ul>
  10. </li>
  11. </ul>

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

什么是最好的方法来完成这个?是否有一个现有的引导css类,我可以添加到< li>或< a>元件?

解决方法

您可以将自定义的禁用类附加到菜单中,链接要禁用的标签,并通过使用 preventDefault并定位该类来简单地删除默认操作,如下所示:
  1. $(".disabled-link").click(function(event) {
  2. event.preventDefault();
  3. });

然后,您可以使用灰色背景或任何您喜欢的风格从.disabled-link创建所有活动。

CSS

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

Demo

猜你在找的CSS相关文章