Question

我有一个菜单栏，我想添加一些CSS或JS。我想这样做，当我在响应视图中点击它时，整个对象可以被定位（我打算做一些背景样式）。我发现了一些堆栈溢出：着色菜单项，菜单本身，但是当应用于整个菜单栏时都没有A）工作在所有B）只为响应工作，这就是我想要的。

我做了codepen。我无法弄清楚:active或:focus之类的东西是否合适。希望代码笔能说明我想要的东西。无论是通过JS还是CSS，我似乎无法完全定位导航栏。我想要实现一个背景效果，不仅仅是下拉菜单，还有点击时汉堡包所在的行。

Answer 1

如果您将其添加到navbar-header div：

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

然后将其添加为函数：

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

它会起作用。你也可以做一个addClass（＆＃39; className＆＃39;），并像这样指定类名：

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

Answer 2

您可以使用 Bootstrap's collapse events 。

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

单击移动（汉堡菜单）时，将整个Bootstrap菜单栏着色

2 个答案:

CODEPEN