twitter-bootstrap twitter bootstrap 通过单击下拉菜单更改按钮的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17909247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap change background color of button with dropdown menu on click
提问by John61590
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
在 Twitter Bootstrap 2 中，我希望能够更改导航栏中按钮的背景颜色，但仅当单击下拉菜单时。我尝试更改 CSS 并且我知道您可以更改的类背景颜色是
.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 looks like this:
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>
...
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?
所以我认为这是一个 JavaScript 问题，但我不确定如何去做。有没有其他人知道并可以提供帮助？
http://jsfiddle.net/3xdws/code is here but it doesn't seem to show the dropdown items for some reason? oh well
http://jsfiddle.net/3xdws/代码在这里，但由于某种原因它似乎没有显示下拉项目？那好吧
回答by designtocode
You need to edit this class .dropdown .open in your css.
您需要在 css 中编辑此类 .dropdown .open 。
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;
}
