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;
}

请在此处查看更新的小提琴