twitter-bootstrap Bootstrap 3 .navbar-toggle 切换状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18927375/
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
Bootstrap 3 .navbar-toggle toggled state
提问by Simon
I'm using bootstrap 3.0 and working on a mobile site. I'm trying to figure out how to change the background colour of the button.navbar-toggle when the navbar has collapsed.
我正在使用引导程序 3.0 并在移动站点上工作。我试图弄清楚如何在导航栏折叠时更改 button.navbar-toggle 的背景颜色。
Basically what I'm asking is how to show a 'pressed' state on mobile device when the navbar menu is opened?
基本上我要问的是如何在导航栏菜单打开时在移动设备上显示“按下”状态？
回答by devo
Try by adding this style after your bootstrap style-sheet.
尝试在引导样式表之后添加此样式。
<style>
.navbar-default .navbar-toggle {
border-color: #563D7C;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #563D7C;
}
</style>
回答by rpalzona
You can also try:
你也可以试试：
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0d730;
}
回答by cephei_vv
I don't like the styling by :hover, because there is no :hoveron mobile devices.
Also the :focusstyle would not be optimal, because when you close the navigation by clicking on the toggle, the :focuswill stay on the toggle, but the user does not interact with the navigation anymore. So that makes not much sense.
我不喜欢 by 的样式:hover，因为:hover在移动设备上没有。此外，:focus样式也不是最佳的，因为当您通过单击切换关闭导航时，:focus将保留在切换上，但用户不再与导航进行交互。所以这没有多大意义。
I prefere to set a class on the toggle button by JavaScript. Bootstrap has events to catch the collaping.
我更喜欢通过 JavaScript 在切换按钮上设置一个类。Bootstrap 有事件来捕捉崩溃。
$('#myNavigation')
.on('shown.bs.collapse', function () {
$('#myNavigationToggle').addClass('active')
})
.on('hidden.bs.collapse', function () {
$('#myNavigationToggle').removeClass('active')
});
Documentation: http://getbootstrap.com/javascript/#collapse-events
