twitter启动更改按钮的背景颜色与下拉菜单上单击 [英] twitter bootstrap change background color of button with dropdown menu on click

问题描述

在Twitter Bootstrap 2中，我希望能够更改导航栏中按钮的背景颜色，但只有在点击下拉菜单时。我尝试改变CSS，我明白你可以改变的类背景颜色是

In Twitter Bootstrap 2, I want to be able to change the background color of a button in the navbar but only when the dropdown menu is clicked. I tried changing the CSS and I understood that the class background-color you can change is

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

但是没有静态地工作。我也尝试过

but that didn't work as it does it statically. I also tried

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

但是没有工作（没有任何反应）。

but that didn't work either (nothing happens).

HTML看起来像这样：

HTML looks like this:

  <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问题，但我不是真的肯定怎么做。其他人是否知道并可以帮助？

So I figured it was a JavaScript problem, but I'm not really sure how to do it. Does anyone else know and can help?

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

http://jsfiddle.net/3xdws/ code is here but it doesn't seem to show the dropdown items for some reason? oh well

推荐答案

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

You need to edit this class .dropdown .open in your css.

所以如果你想改变背景，它将是这样：

So if you wanted the background to change, it will be like this:

.dropdown.open {
    background: #fff;
}

而对于字体颜色更改为：

And for the font color change it here:

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

在这里查看更新的小提琴

这篇关于twitter启动更改按钮的背景颜色与下拉菜单上单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！