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

twitter bootstrap更改按钮的背景颜色，点击下拉菜单

1 个答案: