带悬停的引导下拉菜单
Posted
技术标签:
【中文标题】带悬停的引导下拉菜单【英文标题】：Bootstrap Dropdown with Hover 【发布时间】：2013-04-19 07:44:30 【问题描述】：好的，所以我需要的很简单。
我已经设置了一个导航栏，里面有一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），它工作正常。
问题是它可以工作“onClick”，而我更喜欢它是否工作“onHover”。
有没有内置的方法可以做到这一点？
【问题讨论】：
查看我新发布的正确插件，它可以防止以下 CSS 和 js 解决方案的问题：github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover 【参考方案1】：最简单的解决方案是使用 CSS。添加类似...
.dropdown:hover .dropdown-menu
display: block;
margin-top: 0; // remove the gap so it doesn't close
Working Fiddle
【讨论】：
比长期的“完整”解决方案要好得多。只需添加此项，默认的“点击”下拉菜单即可在悬停时使用，无需额外更改。 这会和内置的可折叠移动菜单冲突，所以你应该把它包裹在一个断点@media (min-width:480px) 另外值得注意的是：如果您有一个带有父子关系的下拉菜单，例如在 wordpress 主题中，您需要删除data-toggle 属性以使父项可点击...只需注意移动屏幕上的附带损害。
是否有一些简单的方法可以禁用点击显示并仅保持悬停行为？
@Micer 使用此 CSS 解决方案非常适合悬停，但如果您还单击该项目，则在将鼠标移离该项目后下拉菜单仍然存在。这是因为单击会在“悬停”下拉菜单下方打开第二个下拉菜单。要解决此问题，请从子 元素中删除 data-toggle="dropdown" 属性，这将防止单击打开重复的下拉菜单【参考方案2】：
最好的方法是通过悬停触发引导点击事件。这样，它仍然应该保持对触摸设备友好
$('.dropdown').hover(function()
$('.dropdown-toggle', this).trigger('click');
);
【讨论】：
如果您有多个下拉级别，则会失败 不使用父链接 关闭下拉菜单后有没有办法移除 Active 类？ 下拉元素和菜单之间有一个像素间隙，可能会导致菜单在某个时候隐藏起来，除非你很快 使用多个下拉菜单需要一些“最接近”的过滤。【参考方案3】：你可以使用jQuery的悬停功能。
您只需要在鼠标进入时添加类open，并在鼠标离开下拉菜单时删除类。
这是我的代码：
$(function()
$('.dropdown').hover(function()
$(this).addClass('open');
,
function()
$(this).removeClass('open');
);
);
【讨论】：
比接受的答案更好。这使所有引导逻辑和样式保持不变。虽然我建议使用第二个回调并明确使用 removeClass 和 addClass 来防止单击按钮时出现一些奇怪的行为（当您离开按钮时它会打开并在您输入时关闭）。 我也认为这是最好的答案。为了让它与 Bootstrap 4 菜单一起使用，我必须使用show 而不是 open，并且还包括 dropdown-menu: $('.dropdown').hover(function() $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');, function() $(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show'););（抱歉格式化。）
如果您有两个下拉菜单项，则不要工作。将鼠标悬停在任何下拉项上都会显示两个子菜单【参考方案4】：
使用 jQuery 的一种简单方法是：
$(document).ready(function()
$('ul.nav li.dropdown').hover(function()
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
, function()
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
);
);
【讨论】：
我喜欢平滑的过渡，但它会导致所有级别的菜单扩展，而不仅仅是第一级。在我将鼠标悬停在其父级上之前，我不希望出现二级菜单。 只获取第一级，添加.first() - $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200); ...【参考方案5】：
对于 CSS，当您也单击它时，它会变得疯狂。这是我正在使用的代码，它也不会改变任何移动视图。
$('.dropdown').mouseenter(function()
if(!$('.navbar-toggle').is(':visible')) // disable for mobile view
if(!$(this).hasClass('open')) // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
);
【讨论】：
一个美女！发送！ CSS 替代品不适用于 Bootstrap 3 及更高版本。【参考方案6】：在 Twitter Bootstrap is not implemented 但你可以使用 this plugin
更新 1：
同样的问题here
【讨论】：
【参考方案7】：将鼠标悬停在导航项目上以查看它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
【讨论】：
【参考方案8】：所以你有这个代码：
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
通常它适用于点击事件，您希望它适用于悬停事件。这很简单，只需使用这个 javascript/jquery 代码：
$(document).ready(function ()
$('.dropdown-toggle').mouseover(function()
$('.dropdown-menu').show();
)
$('.dropdown-toggle').mouseout(function()
t = setTimeout(function()
$('.dropdown-menu').hide();
, 100);
$('.dropdown-menu').on('mouseenter', function()
$('.dropdown-menu').show();
clearTimeout(t);
).on('mouseleave', function()
$('.dropdown-menu').hide();
)
)
)
这很好用，解释如下：我们有一个按钮和一个菜单。当我们将鼠标悬停在按钮上时，我们会显示菜单，当我们将鼠标悬停在按钮上时，我们会在 100 毫秒后隐藏菜单。如果您想知道我为什么使用它，是因为您需要时间将光标从按钮上拖到菜单上。当您在菜单上时，时间会被重置，您可以在此处停留任意时间。当您退出菜单时，我们会立即隐藏菜单，不会有任何超时。
我在很多项目中都使用过这段代码，如果你在使用中遇到任何问题，请随时向我提问。
【讨论】：
这段代码在bootstrap v3上有很多问题。 1.) 如果有多个下拉菜单，则将鼠标悬停在任何下拉菜单上时都会显示所有下拉菜单。 2.) 在小屏幕上，悬停会以一种奇怪的方式显示下拉菜单。【参考方案9】：这就是我用一些 jQuery 让它在悬停时下拉的方法
$(document).ready(function ()
$('.navbar-default .navbar-nav > li.dropdown').hover(function ()
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
, function ()
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
);
);
【讨论】：
不错，但不支持子菜单。【参考方案10】：用适当的插件更新
我已经为下拉悬停功能发布了一个合适的插件，您甚至可以在其中定义单击 dropdown-toggle 元素时会发生什么：
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
既然已经有很多解决方案，我为什么要这样做？
我对所有以前存在的解决方案都有疑问。简单的 CSS 并没有使用 .dropdown 上的 .open 类，因此当下拉菜单可见时，下拉切换元素不会有任何反馈。
js 会干扰点击.dropdown-toggle，因此下拉菜单会在悬停时显示，然后在点击打开的下拉菜单时将其隐藏，移出鼠标会触发下拉菜单再次显示。一些 js 解决方案正在破坏 ios 兼容性，一些插件无法在支持触摸事件的现代桌面浏览器上运行。
这就是为什么我制作了 Bootstrap Dropdown Hover 插件，它通过仅使用标准 Bootstrap javascript API 来防止所有这些问题，而无需任何 hack。
【讨论】：
【参考方案11】：尝试使用带有淡入淡出动画的悬停功能
$('ul.nav li.dropdown').hover(function()
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
, function()
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
);
【讨论】：
这个动画不是在第三深度工作，而是在第二深度工作。对于第三深度，您还有其他解决方案吗？ 请添加 JSFiddle 以供参考【参考方案12】：这将帮助您为引导程序创建自己的悬停类：
CSS：
/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menumargin-top: 0px;/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menumargin-top:2px;/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu
display: block;
设置边距以避免不必要的关闭，它们是可选的。
html：
<div class="btn-group hover_drop_down">
<button type="button" class="btn btn-default" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
如果要删除 onclick open，请不要忘记删除按钮属性 data-toggle="dropdown"，当输入附加下拉菜单时，这也将起作用。
【讨论】：
【参考方案13】：这只会在您不在移动设备上时悬停导航栏，因为我发现悬停导航在移动设备上效果不佳：
$( document ).ready(function()
$( 'ul.nav li.dropdown' ).hover(function()
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document))
$( '.dropdown-toggle', this ).trigger( 'click' );
, function()
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document))
$( '.dropdown-toggle', this ).trigger( 'click' );
);
);
【讨论】：
您可以在这里找到更好的解决方案：github.com/CWSpear/bootstrap-hover-dropdown。【参考方案14】：我尝试了其他解决方案，我正在使用 bootstrap 3，但下拉菜单关闭得太快而无法移动
假设你给li加了class="dropdown"，我加了一个超时
var hoverTimeout;
$('.dropdown').hover(function()
clearTimeout(hoverTimeout);
$(this).addClass('open');
, function()
var $self = $(this);
hoverTimeout = setTimeout(function()
$self.removeClass('open');
, 150);
);
【讨论】：
【参考方案15】：使用hover 触发click 事件有一个小错误。如果mouse-in 然后click 会产生反之亦然的效果。当mouse-out 时为opens，当mouse-in 时为close。更好的解决方案：
$('.dropdown').hover(function()
if (!($(this).hasClass('open')))
$('.dropdown-toggle', this).trigger('click');
, function()
if ($(this).hasClass('open'))
$('.dropdown-toggle', this).trigger('click');
);
【讨论】：
【参考方案16】： $('.navbar .dropdown').hover(function()
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
, function()
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
);
【讨论】：
【参考方案17】：html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
jquery
$(document).ready( function()
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function()
$(this).find('ul').css(
"display": "block",
"margin-top": 0
);
,
function()
$(this).find('ul').css(
"display": "none",
"margin-top": 0
);
);
);
codepen
【讨论】：
【参考方案18】：Bootstrap 下拉菜单 在悬停时工作，并通过在 CSS 中添加属性 display:block; 并删除这些属性 data-toggle="dropdown" 来保持关闭状态role="button" 来自按钮标签
.dropdown:hover .dropdown-menu
display: block;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>【讨论】：
【参考方案19】：我提出的解决方案检测它是否不是触摸设备并且navbar-toggle（汉堡菜单）不可见并使父菜单项在悬停时显示子菜单和跟随点击它的链接。
也使 tne margin-top 0 因为导航栏和某些浏览器中的菜单之间的间隙不允许您将鼠标悬停在子项上
$(function()
function is_touch_device()
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
;
if(!is_touch_device() && $('.navbar-toggle:hidden'))
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function()
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>$(function()
$("#nav .dropdown").hover(
function()
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
,
function()
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>【讨论】：
【参考方案20】：使用mouseover() 函数触发点击。这样之前的点击事件就不会有害了。用户可以同时使用悬停和点击/触摸。它将是移动友好的。
$(".dropdown-toggle").mouseover(function()
$(this).trigger('click');
)
【讨论】：
【参考方案21】：您使用 Jquery 实现此功能：
$('.dropdown').on('mouseover', function()
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
);
$('.dropdown').on('mouseout', function()
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
);
【讨论】：
以上是关于带悬停的引导下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章