在移动视图中控制导航栏切换按钮的状态

Question

当我在移动视图中激活导航栏下拉切换按钮时，它的颜色会随着菜单下拉而从深黑色（悬停颜色）变为灰色。但是，当您在按钮外部单击时，它会恢复为默认的非悬停颜色（较浅的黑色阴影），尽管菜单仍在下拉。

所以，我的第一个问题是，只要下拉菜单，无论您做什么，我如何保持该活动颜色？

我的第二个问题是，当您第二次单击按钮时，导致菜单隐藏，它保持其活动颜色（灰色）；我希望它继承其默认的、非悬停颜色的较浅黑色阴影。

我该怎么做？ Bootply

HTML：

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li class = "dropdown"> 
                            <a href = "" class = "dropdown-toggle" data-toggle = "dropdown"><span></span></a>
                            <ul class = "dropdown-menu">
                                <li><a href = "#"></a></li>
                                <li><a href = "#"></a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->

                    </ul><!-- END: "nav navbar-nav navbar-right" -->
                </div><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
              </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

CSS：

.navbar-inverse .navbar-toggle:hover {
  background-color: #000000;
}
.navbar-inverse .navbar-toggle:focus {
    background-color: #666666;
}

Answer 1

我知道这个问题很老了，但我想分享一个更好的解决方案。

Bootstrap 导航栏使用他们的collapse plugin 来切换菜单。所以最好注意崩溃事件，然后在.navbar-toggle 上切换类。这是一个例子：

$('.navbar .navbar-collapse')
  .on('hide.bs.collapse', function () {
    console.log('menu closed');
    $('.navbar .navbar-toggle').removeClass('active');
  })
  .on('show.bs.collapse', function () {
    console.log('menu open');
    $('.navbar .navbar-toggle').addClass('active');
  });

我希望这会有所帮助。

Answer 2

如果有办法只使用 CSS，我不知道该怎么做。为了做你想做的事，首先你需要一些 CSS 更改，然后是一些 Javascript（为了方便起见，我在这里使用 jQuery）。

首先，删除.navbar-toggle:focus 的定义，因为:focus 不能为所欲为。

其次，将所需的背景颜色放入一个可以打开和关闭的类中（我称之为.menuActive）。

.menuActive { background-color: #666; }

第三个是切换代码。如果我理解正确，您希望 bg 颜色在用户单击并出现菜单时变为灰色，然后在用户再次单击且菜单消失时恢复为默认颜色。假设您使用的是 jQuery，请将以下内容插入您的 $(document).ready():

$('.navbar-toggle').click(function() {
    $(this).toggleClass('menuActive');
});

如果您需要比.toggleClass() 提供的更多控制权，您还可以自己跟踪状态并使用.addClass() 和.removeClass() 方法。