Question

在Bootstrap 4中设置导航栏样式时，我会看到一个下拉列表。我想突出显示该下拉菜单项处于活动状态。但是，当我使用“活动”类时，所有子项（子项）也会获得突出显示效果。这看起来很丑。在所附的示例中，我不想突出显示“链接dd1”和“链接dd2”。

如何仅突出显示父菜单项而不显示子项？谢谢大家。

Fiddle with code sample

代码：

<style>
#x
 .active a{color:yellow ; background-color:brown;}

</style>
<nav id="x" class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown active">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link dd1</a>
        <a class="dropdown-item" href="#">Link dd2</a>
      </div>
    </li>
  </ul>
</nav>
<br>

<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the navbar.</p>
</div>

Answer 1

之所以也突出显示所有子项，是因为您是通过CSS告知的：

#x .active a {
    color:yellow; 
    background-color:brown;
}

您是说请突出显示活动菜单上的所有锚标记。

如果您只想突出显示父菜单，请具体说明：

#x .active a.nav-link {        
    color:yellow; 
    background-color:brown;
}

演示： https://jsfiddle.net/davidliang2008/aq9Laaew/285539/

甚至

#x .active > a {        
    color:yellow; 
    background-color:brown;
}

演示： https://jsfiddle.net/davidliang2008/aq9Laaew/285541/

会做。

Bootstrap-4导航栏-如何仅在父级上使用“活动”类

1 个答案: