如何让我的汉堡菜单按钮在单击后更改颜色？

Question

我正在使用 Bootstrap，并试图让基本的汉堡菜单按钮在单击后更改背景颜色。检查时我可以在浏览器中进行颜色更改，但无法在我的 css 中复制。我也无法仅在单击时更改颜色。我相信这可能是一个特异性问题。汉堡按钮取自引导示例之一。

下面的导航栏被编码为在左上角显示“Food, LLC”，并隐藏所有其他链接，直到宽度减小到 769 像素。当点击 769px 宽度时，会出现汉堡包按钮。然后，当单击按钮时，链接会显示为下拉菜单。

我以红色作为背景色，但如有任何颜色变化，我们将不胜感激！

我试图尽可能具体地使用 navbar-toggler 类，看看我是否可以改变它，但我不能。这是在 chrome 上测试的。

另外，我尝试过使用 ":active" css 属性，但没有成功。

@media (min-width: 769px) {
 button {
    display: none;
    background-color: red;
 }

.navbar-brand>.navbar-toggler{
    background-color: red !important;
 }

 .navbar-toggler:active{
    background-color: red;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-collapse-md navbar-dark bg-dark" 
id="button">
  <a class="navbar-brand" href="index.html">Food, LLC</a>
  <button class="navbar-toggler" id="navbarToggleExternalContent 
active" type="button" data-toggle="collapse" data- 
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse active" id="navbarNav">
    <ul class="navbar-nav" id="color">
      <li class="nav-item">
        <a class="nav-link" href="chicken.html">Chicken</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="beef.html">Beef</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="sushi.html">Sushi</a>
      </li>
    </ul>
  </div>
 </nav>

Answer 1

如果您只想使用 CSS 而不创建任何自定义类，则可以定位 .navbar-toggler[aria-expanded="true"] 选择器。

如果您检查页面，感谢 Bootstrap 的 JS，每当您单击按钮时，aria-expanded 属性会在 true 和 false 之间切换，因此您可以利用它来获得优势。

.navbar-toggler[aria-expanded="true"] {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-collapse-md navbar-dark bg-dark" id="button">
  <a class="navbar-brand" href="index.html">Food, LLC</a>
  <button class="navbar-toggler" id="navbarToggleExternalContent 
active" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse active" id="navbarNav">
    <ul class="navbar-nav" id="color">
      <li class="nav-item">
        <a class="nav-link" href="chicken.html">Chicken</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="beef.html">Beef</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="sushi.html">Sushi</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

使用 jquery 并在点击时切换活动类。

脚本

<script>
$(document).ready(function(){
  $('.navbar-dark .navbar-toggler').click(function(){
    $(this).toggleClass('active');
  });
});
</script>

CSS

<style>
  .navbar-brand>.navbar-toggler.active{
    background-color: red;
  }
</style>

Answer 3

不确定是否要更改图标或背景。

更改图标这对我有用（尽管活动状态会在瞬间取消选择）：

.navbar-dark .navbar-toggler-icon:active {
    background: red !important; // will replace the icon image with a red square
}

改变背景：

.navbar-dark .navbar-toggler:active {
    background: red;
}

理想情况下，类会在点击时打开.navbar-toggler。例如。当用户点击它时，active 将被添加。这样，除非页面刷新或再次将其删除，否则它将保持“活动”状态。如前所述here

你可以做类似的事情

.navbar-dark .navbar-toggler.active { //note the change from : to .
    background: red;
}

或如@IvanS95 所述：

您可以定位 .navbar-toggler[aria-expanded="true"] 选择器，如果 您只想使用 CSS 而不创建任何自定义类