如何使用 Bootstrap 4 更改下拉菜单活动背景颜色？

Question

如何仅在展开时更改此菜单的背景颜色？

当不活动时，我希望背景如图所示，但是，当菜单处于活动状态时，我希望颜色变为浅灰色。如果不改变这两个州的整个背景，我无法弄清楚如何做到这一点。

这是我的代码：

 <nav
      class="navbar navbar-expand-xl navbar-light fixed-top wrap pt-3"
      id="mainNav"
    >
      <button
        class="hamburger hamburger--squeeze"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto pt-2">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Illustration <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Graphic Design</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav> 

我已经为所有屏幕提供了这个滚动功能：

window.addEventListener('scroll', function (event) {
        event.preventDefault();

        if (window.scrollY <= 50) {
          nav.style.backgroundColor = 'transparent';
        } else {
          nav.style.backgroundColor = '#fff';
          nav.style.opacity = '0.9';
          nav.style.transition = '0.4s ease';
        }

Answer 1

如果您使用此css plugin，您可以移除滚动事件并使用点击事件处理程序：

document.querySelectorAll(".hamburger").forEach(function(hamburger) {
    hamburger.addEventListener("click", function() {
        var nav = document.querySelector('#mainNav');
        if (this.classList.contains('is-active') == false) {
            nav.style.backgroundColor = 'red';
            nav.style.opacity = '0.9';
            nav.style.transition = '0.4s ease';
        } else {
            nav.style.backgroundColor = 'transparent';
        }
        this.classList.toggle("is-active");
    }, false);
});

sn-p：

document.querySelectorAll(".hamburger").forEach(function(hamburger) {
    hamburger.addEventListener("click", function() {
        var nav = document.querySelector('#mainNav');
        if (this.classList.contains('is-active') == false) {
            nav.style.backgroundColor = 'red';
            nav.style.opacity = '0.9';
            nav.style.transition = '0.4s ease';
        } else {
            nav.style.backgroundColor = 'transparent';
        }
        this.classList.toggle("is-active");
    }, false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jonsuh/hamburgers@master/dist/hamburgers.min.css">


<nav class="navbar navbar-expand-xl navbar-light fixed-top wrap pt-3" id="mainNav">
    <button class="hamburger hamburger--squeeze" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto pt-2">
            <li class="nav-item active">
                <a class="nav-link" href="#">Illustration <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Graphic Design</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Answer 2

尝试通过这个 css 标签更新切换按钮和样式的默认 css：

[aria-expanded="true"] {
   /* your custom style here */
}