jQuery 带有悬停的 Bootstrap 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16214326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Dropdown with Hover
提问by Dr.Kameleon
OK, so what I need is fairly straightforward.
好的，所以我需要的是相当简单的。
I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine.
我已经设置了一个带有一些下拉菜单的导航栏（使用class="dropdown-toggle" data-toggle="dropdown"），并且它工作正常。
The thing is it works "onClick", while I would prefer if it worked "onHover".
问题是它有效“ onClick”，而我更喜欢它“ onHover”。
Is there any built-in way to do this?
有没有内置的方法来做到这一点？
回答by brbcoding
The easiest solution would be in CSS. Add something like...
最简单的解决方案是在 CSS 中。添加类似...
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
回答by Mark Williams
The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly
最好的方法是通过悬停触发引导程序单击事件。这样，它应该仍然保持触摸设备友好
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
回答by adhi
You can use jQuery's hover function.
您可以使用 jQuery 的悬停功能。
You just need to add the class openwhen the mouse enters and remove the class when the mouse leaves the dropdown.
您只需要open在鼠标进入时添加类并在鼠标离开下拉列表时删除类。
Here's my code:
这是我的代码：
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
回答by Biagio Chirico
An easy way, using jQuery, is this:
使用 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);
});
});
回答by user1079877
For CSS it goes crazy when you also click on it. This is the code that I'm using, it also don't change anything for mobile view.
对于 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');
}
}
});
回答by Emad Mokhtar
In Twitter Bootstrap is not implementedbut you can use the this plugin
在 Twitter Bootstrap中没有实现但是你可以使用这个插件
Update 1:
更新 1：
Sames question here
同样的问题在这里
回答by esm
Hover over the nav items to see that they activate on hover. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
将鼠标悬停在导航项目上以查看它们在悬停时激活。 http://cameronsspear.com/demos/twitter-bootstrap-hover-dropdown/#
回答by Crisan Raluca Teodora
So you have this code:
所以你有这个代码：
<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>
Normally it works on click event, and you want it work on hover event. This is very simple, just use this javascript/jquery code:
通常它适用于单击事件，并且您希望它适用于悬停事件。这很简单，只需使用此 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();
})
})
})
This works very well and here is the explanation: we have a button, and a menu. When we hover the button we display the menu, and when we mouseout of the button we hide the menu after 100ms. If you wonder why i use that, is because you need time to drag the cursor from the button over the menu. When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.
这很有效，下面是解释：我们有一个按钮和一个菜单。当我们将鼠标悬停在按钮上时，我们会显示菜单，而当鼠标移开按钮时，我们会在 100 毫秒后隐藏菜单。如果您想知道我为什么使用它，是因为您需要时间将光标从菜单上的按钮拖动。当您出现在菜单上时，时间会重置，您可以根据需要在那里停留任意时间。当您退出菜单时，我们将立即隐藏菜单而不会超时。
I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.
我已经在很多项目中使用过这段代码，如果您在使用中遇到任何问题，请随时向我提问。
回答by Amir5000
This is what I use to make it dropdown on hover with some jQuery
这就是我用来在悬停时使用一些 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');
});
});
回答by Rakesh Vadnal
Try this using hover function with fadein fadeout animations
尝试使用带有淡入淡出动画的悬停功能
$('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);
});
