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');
  });

我希望这有用。

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

1 个答案: