在 bootstrap 5 导航栏上突出显示打开的下拉菜单

Question

Bootstrap 5 navbar 用于创建下拉菜单。

如何在打开的下拉菜单上方突出显示当前菜单项，例如 windows 桌面应用程序，以便用户可以看到打开的下拉菜单所属的菜单项。

Bootstrap 5 不提供任何亮点：

如果下拉菜单打开，如何使 Dropdown2 背景变亮或变暗或提供其他指示？

导航栏

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown1
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
            <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown2
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
            <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown3
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
            <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

测试用例在https://www.codeply.com/p/2U6C3qPw2x

Bootstrap 5，ASP.NET 6 使用了 MVC。还安装了最新的 Jquery。

Answer 1

当点击下拉菜单时自动添加 .show class，您可以使用这个选择器并定义样式：

.nav-link.dropdown-toggle.show{
    background:orange;
}

show result

在 bootstrap 5 导航栏上突出显示打开的下拉菜单

Higlight opened dropdown menu on bootstrap 5 navbar

html

css

jquery

navbar

twitter-bootstrap