html - 单击后如何使我的汉堡包菜单按钮更改颜色？

Question

我正在使用 Bootstrap 并尝试让基本的汉堡包菜单按钮在单击后更改背景颜色。检查时我可以在浏览器中更改颜色，但不能在我的 css 中复制。我也不能只在点击时改变颜色。我相信这可能是一个特异性问题。汉堡包按钮取自其中一个 Bootstrap 示例。

下面的导航栏被编码为在左上角显示“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

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

如果您检查页面，多亏了 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>