如何更改打开的 bootstrap 下拉列表的背景颜色

Question

如何更改背景颜色，假设打开的 bootstrap 下拉选项为红色。这是代码：

    <nav class="navbar navbar-default" role="navigation">
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Something</a></li>
          <li><a href="#">Another something</a></li>
        </ul>
      </li>          
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

和css：

    .navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

我想做的是，当您单击按钮（例如 WOMEN）时，它会将文本颜色更改为红色，将主要选项（WOMEN）的背景更改为绿色，并保持这种状态，直到我切换单击或从主菜单中选择另一个选项 (MEN)

谢谢

Here is jsfiddle

Answer 1

希望这就是您想要的。当您单击 dropdown 时，名为 .open 的 class 会添加到 dropdown，因此您可以借助它来设置样式。

只需添加这些代码

ul.nav.navbar-nav .dropdown.open .dropdown-toggle{
  color: red;
  background-color: green;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}
ul.nav.navbar-nav .dropdown.open .dropdown-toggle{
  color: red;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-default" role="navigation">
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Something</a></li>
              <li><a href="#">Another something</a></li>
            </ul>
          </li>          
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>

如何更改打开的 bootstrap 下拉列表的背景颜色

How to change background colour of opened bootstrap dropdown list

toggle

twitter-bootstrap

drop-down-menu