下拉打开时如何使链接处于活动状态？答案

【问题标题】：How to make a link active when dropdown opens?下拉打开时如何使链接处于活动状态？
【发布时间】：2017-12-02 17:25:40
【问题描述】：

在引导导航栏中，如何激活导航链接（只需更改导航链接的背景颜色）当导航链接的相应下拉菜单打开时或下拉菜单链接悬停？我尝试了以下代码

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50);
	}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50);
});

.navbar-nav li a{
  color: #000;
  text-transform: uppercase;
  padding: 13px 10px;
  text-align: center;
}
.navbar-nav li a:hover{
  background-color: #238500;
  color: #fff;
}
.dropdown-menu li a{
  font-weight: normal !important;
  padding: 15px !important;
  color: #fff !important;
  text-transform: capitalize !important;
  text-align: left !important;
}
ul.dropdown-menu li a:hover{
  background-color: #3c3c3c;
  color: #fff;
  background-image: none;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
	background-image: none;
}
ul.dropdown-menu li a:hover > .navbar-nav li a{
	background-color: #238500 !important;
}
.dropdown-menu{
  background-color: #238500;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Education</a>
    <ul class="dropdown-menu">
      <li><a href="#">Goals and Objectives</a></li>
      <li><a href="#">Governing priciples</a></li>
      <li><a href="#">Board of directors</a></li>
    </ul>
  </li>
</ul>

【问题讨论】：

标签： jquery html css

【解决方案1】：

试试这个：

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50);
  $(this).addClass("hover");
	}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50);
  $(this).removeClass("hover");
});

.navbar-nav li a{
  color: #000;
  text-transform: uppercase;
  padding: 13px 10px;
  text-align: center;
}
.navbar-nav li a:hover{
  background-color: #238500;
  color: #fff;
}
.dropdown-menu li a{
  font-weight: normal !important;
  padding: 15px !important;
  color: #fff !important;
  text-transform: capitalize !important;
  text-align: left !important;
}
ul.dropdown-menu li a:hover{
  background-color: #3c3c3c;
  color: #fff;
  background-image: none;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
	background-image: none;
}
ul.dropdown-menu li a:hover > .navbar-nav li a{
	background-color: #238500 !important;
}
.dropdown-menu{
  background-color: #238500;
}

.hover {
background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Education</a>
    <ul class="dropdown-menu">
      <li><a href="#">Goals and Objectives</a></li>
      <li><a href="#">Governing priciples</a></li>
      <li><a href="#">Board of directors</a></li>
    </ul>
  </li>
</ul>

【讨论】：

非常感谢您的帮助，现在可以使用了 :-)

【解决方案2】：

据我了解，这是你想要的吗？

.navbar-nav .open>a,
.navbar-nav .open>a:focus,
.navbar-nav .open>a:hover {
    background-color: #238500 ;
    color: #fff;
}

只需在您的 CSS 中添加此样式即可。

【讨论】：

感谢您的帮助 :-)
如果有帮助，您可以通过点击向上箭头@Muhammad Mohsin 来投赞成票
@viCky 没有这样的条件，它适用于所有菜单项。