当前位置: 首页 > 知识库问答 >
问题:

当下拉菜单打开时,如何使链接处于活动状态?

仇航
2023-03-14

在引导导航栏中,当导航链接各自的下拉菜单被打开或下拉菜单链接被悬停时,如何使导航链接激活(只需改变导航链接的bg颜色)?我尝试了以下代码

null

$('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>

null

共有1个答案

督弘化
2023-03-14

试试看:

null

$('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>
 类似资料:
  • 我正在尝试制作一个下拉菜单,其中。单击时会显示下拉内容,如果用户单击栏中的任何其他下拉列表,下拉内容将消失。问题是我有多个下拉列表,我想我只是需要帮助修改我现有的javascript。我希望侧边栏(nav)只显示当前活动的下拉菜单。在“我的代码”上,当您打开下拉列表时,它仍然会打开,直到用户再次单击下拉箭头以关闭该特定下拉列表。

  • 问题内容: 如果下拉菜单可见,并且我在下拉菜单外部单击,它将关闭。我需要它不关闭。 从文档中: 打开后,该插件还会添加 .dropdown-backdrop 作为单击区域,以在菜单外单击时关闭下拉菜单。 我可以添加什么JavaScript以防止下拉列表关闭? 问题答案: 从_Bootstrap_文档的事件部分: :调用hide实例方法后,立即触发此事件。 对于初学者来说,为了防止下拉菜单关闭,我们

  • 尝试将'active'类添加到与当前页面相对应的链接中,该链接位于menu.html中存储的菜单上,并通过jQuery将其拉到index.html。 我已经设法用JQuery调用了menu.html文件,并将菜单插入index.html。CSS的造型都很完美。但是,由于我现在不是单独添加'active'类到每个菜单项,所以我需要一个方法来实现这一点。在index.html中所有活动类都在一个屋檐下

  • 我有两个活动Main activity和ReceivedMessageActivity。以及一个后台服务,用于从中获取上下文并传递给SMSReceiver,SMSReceiver扩展BroadcastReceiver以接收sms。当收到短信时,SMSReceiver会创建通知。我希望当我点击通知时,如果应用程序未运行ReceivedMessageActivity,则打开该通知;如果应用程序正在运行

  • 我试图改变颜色和背景颜色的活动链接在一个引导的下拉框。 我已经覆盖了bootstrap的@dropdownLinkColorActive和@dropdownLinkBackgroundActive变量,但这没有效果。 “.navbar inverse.nav.active”的css 为什么. navbar-inverse类重写. dropdown菜单类?

  • 我正在寻找一种方法,显示一个div时,一个锚点被点击。我在我的页面上有一个HTML5/PHP表单,当提交时,它会将用户带着一条谢谢消息带到div中放置的锚,这是激活该链接的唯一方法。这是我试图显示的div: 当锚点处于活动状态时,是否有一种方法可以改变(可能使用CSS)显示:none?