javascript - 单击移动设备(汉堡菜单)时为整个 Bootstrap 菜单栏着色

Question

我有一个菜单栏，我想向其中添加一些 CSS 或 JS。我想让它在响应 View 中单击它时，整个对象都可以被定位(我打算做一些背景样式)。我发现了一些堆栈溢出:为菜单项、菜单本身着色，但是当应用于整个菜单栏时，这些都没有 A) 完全有效 B) 仅适用于响应式，这正是我想要的。

我做了一个 codepen .我只是不知道像 :active 或 :focus 之类的东西是否合适。希望代码笔能说明我想要什么。无论是通过 JS 还是 CSS，我似乎都无法将整个导航栏作为目标。我不仅要为下拉菜单实现背景效果，还要为点击时汉堡包所在的行实现背景效果。

Answer 1

您可以使用 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.
});

CODEPEN