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

Question

我正在使用Bootstrap，并尝试使基本的汉堡菜单按钮在单击后更改背景颜色。我可以在浏览器检查时改变颜色，但无法在我的CSS中复制。我也无法使颜色仅在单击时更改。我认为这可能是一个特殊性问题。汉堡包按钮是从Bootstrap示例中获取的。

下面的导航栏被编码为在左上方显示“Food, LLC”，并且在宽度缩小到769px之前所有其他链接都将被隐藏。当达到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>

- msa522491

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>

- IvanS95

---

非常感谢您的帮助！这个回答快速而且有效地解决了我的问题！ - msa522491

愿上帝保佑你！ :D - wet_waffle

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>

- Harish Iyer

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。这样，除非页面刷新或某些东西再次删除它，否则它将保持“活动”状态。如此处所述。

你可以做一些像

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

或者如@IvanS95所提到的：

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

- Anima-t3d