当点击移动菜单(汉堡包菜单)时，整个启动带菜单

Question

我有一个菜单，我想添加一些CSS或JS。我想这样做，当我点击它时，在响应视图，整个对象可以有针对性(我计划做一些背景造型)。我已经发现一些堆栈溢出了re:着色菜单项，菜单本身，但是当应用到整个菜单时

我做了一个码页。我只是不知道像:active或:focus之类的东西是否合适。希望代码笔能说明我想要什么。无论是通过JS还是CSS，我都无法将导航条作为整个导航栏的目标。我想要达到的背景效果，不仅是下拉，但排的汉堡包生活在当点击。

Answer 1

您可以使用自举塌陷事件。

$('.navbar-collapse').on('show.bs.collapse', function () {
  // Do your stuff
  // This event fires immediately when the show instance method is called.
});

$('.navbar-collapse').on('hide.bs.collapse', function () {
  // Do your stuff
  // This event is fired immediately when the hide method has been called.
});

CODEPEN

Answer 2

如果将其添加到导航栏标题div中：

<div onClick="clickMe()" class="navbar-header page-scroll">

然后将其作为一个函数添加：

function clickMe(){
   if(window.innerWidth < 768){
    $('.navbar-header').css('background-color', 'red');
  }
}

看起来不错。您还可以执行一个addClass('className')，并指定类名如下：

.navbar-header.className{
background-color:red;
}