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中会添加一个名为dropdown的类，因此您可以根据其设置样式。

只需添加这些代码

即可

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何更改已打开的bootstrap下拉列表

1 个答案: