Bootstrap 下拉菜单在悬停时关闭
Posted
技术标签:
【中文标题】Bootstrap 下拉菜单在悬停时关闭【英文标题】:Boostrap dropdown menu is closed on hovering 【发布时间】:2019-12-31 09:35:22 【问题描述】:我有一个下拉菜单,里面有另一个下拉菜单,我添加了一些 Jquery 代码来打开/关闭悬停时的两个下拉菜单。
我将鼠标悬停在主下拉菜单 services
上,然后悬停在 service2
这是另一个下拉菜单上,当我尝试转到其中的元素 Service2 sub1
、Service2 sub2
时,下拉菜单已关闭。
代码如下:
html:
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Service1</a></li>
<li role="presentation">
<a data-toggle="collapse" href="#collapse" class="sub-menu">
Service2 <b class="caret"></b>
</a></li>
<ul>
<div id="collapse" class="panel-collapse collapse">
<li role="presentation"><a href="#">Service2 sub1</a></li>
<li role="presentation"><a href="#">Service2 sub2</a></li>
</div>
</ul>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .navbar-nav -->
</div> <!-- .container -->
</div> <!-- .navbar -->
jQuery:
$(document).ready(function()
//Stop propagation for the dropdown
$(document).on('click', '.dropdown-menu', function (e)
e.stopPropagation();
);
//On hovering over the main menu 'Services'
$(".dropdown").hover(
function()
$('.dropdown-menu', this).stop().fadeIn("fast");
$(this).addClass('active');
,
function()
$('.dropdown-menu', this).stop().fadeOut("fast");
$(this).removeClass('active');
);
//On hovering over the sub-menu `Services`
$(".sub-menu").hover(
function()
$('#collapse').removeClass('collapse').addClass('collapse in');
,
function()
$('#collapse').removeClass('collapse in').addClass('collapse');
);
);
她是一个活生生的小提琴来测试https://jsfiddle.net/0ksz9tnL/
【问题讨论】:
【参考方案1】:首先我想指出您的 HTML 无效,您在 ul
内有一个 ul
看这里:
<ul class="dropdown-menu">
<li><a href="#">Service1</a></li>
<li role="presentation">
<a data-toggle="collapse" href="#collapse" class="sub-menu">
Service2 <b class="caret"></b>
</a></li>
<ul>
其次,如果您只是将 sub-menu
类从 <a data-toggle="collapse" href="#collapse" class="sub-menu">
移动到它的父级,那么它就可以正常工作。
工作演示
$(document).ready(function()
//Stop propagation for the dropdown
$(document).on('click', '.dropdown-menu', function(e)
e.stopPropagation();
);
//On hovering over the main menu 'Services'
$(".dropdown").hover(
function()
$('.dropdown-menu', this).stop().fadeIn("fast");
$(this).addClass('active');
,
function()
$('.dropdown-menu', this).stop().fadeOut("fast");
$(this).removeClass('active');
);
//On hovering over the sub-menu `Services`
$(".sub-menu").hover(
function()
$('#collapse').removeClass('collapse').addClass('collapse in');
,
function()
$('#collapse').removeClass('collapse in').addClass('collapse');
);
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Service1</a></li>
<li role="presentation" class="sub-menu">
<a data-toggle="collapse" href="#collapse">
Service2 <b class="caret"></b>
</a>
<ul>
<div id="collapse" class="panel-collapse collapse">
<li role="presentation"><a href="#">Service2 sub1</a></li>
<li role="presentation"><a href="#">Service2 sub2</a></li>
</div>
</ul>
</li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .navbar-nav -->
</div> <!-- .container -->
</div> <!-- .navbar -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
【讨论】:
所以您只是将sub-menu
移动到父元素?
@User1804 你看看我发布的演示
是的,我明白了,但是您也更改了 html,以便父级包装更多元素,我没有问题,当我刚刚移动类时它不起作用
@User1804 尝试查看并确保您的 html 与我提供的演示中的 html 匹配,您可以看到它在那里工作。以上是关于Bootstrap 下拉菜单在悬停时关闭的主要内容,如果未能解决你的问题,请参考以下文章
如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单?
在悬停时制作 Twitter Bootstrap 菜单下拉菜单,而不是轻松点击(解决方案)