html - twitter bootstrap 在点击时使用下拉菜单更改按钮的背景颜色

Question

在 Twitter Bootstrap 2 中，我希望能够更改导航栏中按钮的背景颜色，但只能在单击下拉菜单时更改。我尝试更改 CSS，我了解到您可以更改的类背景颜色是

    .dropdown-toggle {
     *margin-bottom: -3px;
     background-color: #fffffff;
     }

但这不起作用，因为它是静态的。我也试过了

     .dropdown-toggle:active,
    .open .dropdown-toggle {
    outline: 0;
    background-color: #fffffff;
     } 

但这也不起作用(没有任何反应)。

HTML 看起来像这样:

  <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="#">...</a>
      <!-- nav-collapse indicates what will be in collapsed navigation -->
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#about">...</a></li>
          <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">...<b class="caret"></b></a>
    <ul class="dropdown-menu">
          <li><a href="#">...</a></li>
          <li><a href="#">...</a></li>
              </ul>
          </li>
          ...

所以我认为这是一个 JavaScript 问题，但我不太确定该怎么做。还有其他人知道并且可以提供帮助吗？

http://jsfiddle.net/3xdws/代码在这里，但由于某种原因它似乎没有显示下拉项？好吧

Answer 1

您需要在您的 css 中编辑此类 .dropdown .open。

所以如果你想改变背景，它会是这样的:

.dropdown.open {
    background: #fff;
}

在这里更改字体颜色:

.dropdown.open .dropdown-toggle {
    color: #000;
}

See the updated fiddle here