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

Bootstrap 3 .navbar-toggle切换状态

3 个答案: