我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
这个也可以。
$('.dropdown').on('mouseover',function(){
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
$(this).find('.dropdown-menu').hide();
});
如果下拉菜单在悬停元素之间有间隙,下拉菜单将立即关闭,如图所示
为了防止这种行为,您可以为事件添加一个100毫秒的超时
let dropdownTimer;
$('.dropdown').on('mouseover', () => {
clearTimeout(dropdownTimer)
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
dropdownTimer = setTimeout(() => {
$(this).find('.dropdown-menu').hide();
}, 100)
});
其他回答
你有这样的代码:
<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毫秒后隐藏菜单。如果你想知道我为什么使用它,是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时,时间会被重置,你可以在那里停留多长时间都行。当您退出菜单时,我们将立即隐藏菜单,没有任何超时。
我已经在许多项目中使用了这段代码,如果您在使用它时遇到任何问题,请随时向我提问。
最标准的回答:
支持aria-expanded属性 支持非触摸设备 支持触摸设备 支持所有下拉菜单
var isTouchDevice = (('ontouchstart' in window) ||
(navigator.MaxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
// open dropdowns on hover on non mobile devices
$(".dropdown").hover(function(e) {
$('.dropdown-toggle', this).dropdown("toggle");
e.stopPropagation();
});
// prevent blinkling
$(".submenu-link").click(function(e) {
e.stopPropagation();
});
}
如果你需要,你可以将$(".dropdown")更改为特定的区域:
$("#top-menu .dropdown")
我是这样做的:
$('ul.nav li.dropdown').hover(function(){
$(this).children('ul.dropdown-menu').slideDown();
}, function(){
$(this).children('ul.dropdown-menu').slideUp();
});
我希望这能帮助到一些人……
你可以使用默认的$().dropdown('toggle')方法来切换悬停时的下拉菜单:
$(".nav .dropdown").hover(function() {
$(this).find(".dropdown-toggle").dropdown("toggle");
});
$('.dropdown').hover(function(e){$(this).addClass('open')})