突出显示引导程序 5 导航栏上打开的下拉菜单答案

【问题标题】：Higlight opened dropdown menu on bootstrap 5 navbar突出显示引导程序 5 导航栏上打开的下拉菜单
【发布时间】：2022-01-27 11:50:09
【问题描述】：

Bootstrap 5 导航栏用于创建下拉菜单。

如何突出显示打开的下拉列表上方的当前菜单项，就像 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

使用引导程序 5、ASP.NET 6 MVC。还安装了最新的 Jquery。

【问题讨论】：

当我尝试 codeply 时，我看到了亮点。 chrome 开发工具样式选项卡说它应用了 .dropdown-item:focus 和 .dropdown-item:hover 样式。颜色超级淡#e9ecef;
悬停样式应该已经应用了。我在测试代码时看到了它们
@ourmandave 我在最新的 chrome 中尝试过，但如果下拉菜单如相关图片所示打开，则下拉标题不会突出显示

标签： html jquery css twitter-bootstrap navbar

【解决方案1】：

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

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

show result

【讨论】：