twitter-bootstrap - Bootstrap 3 .navbar-toggle 切换状态

Question

我正在使用 bootstrap 3.0 并在移动网站上工作。我试图弄清楚当导航栏折叠时如何更改 button.navbar-toggle 的背景颜色。

基本上我要问的是当导航栏菜单打开时如何在移动设备上显示“按下”状态？

Answer 1

尝试在您的引导样式表之后添加此样式。

<style>
.navbar-default .navbar-toggle {
  border-color: #563D7C;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #563D7C;
}
</style>

Answer 2

你也可以试试：

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c0d730;
}

Answer 3

我不喜欢 的造型:hover，因为:hover在移动设备上没有。样式也不是最佳的:focus，因为当您通过单击切换关闭导航时，:focus将保持在切换上，但用户不再与导航交互。所以这没有多大意义。

我更喜欢通过 JavaScript 在切换按钮上设置一个类。Bootstrap 有事件来捕捉崩溃。

$('#myNavigation')
   .on('shown.bs.collapse', function () {
     $('#myNavigationToggle').addClass('active')
   })
   .on('hidden.bs.collapse', function () {
     $('#myNavigationToggle').removeClass('active')
   });

文档： http: //getbootstrap.com/javascript/#collapse-events