我需要的很简单。
我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"),它工作得很好。
事情是它工作“onClick”,而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
我需要的很简单。
我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"),它工作得很好。
事情是它工作“onClick”,而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
当前回答
你可以使用jQuery的悬停函数。
您只需要在鼠标进入时添加类打开,并在鼠标离开下拉菜单时删除类。
这是我的代码:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
其他回答
我尝试其他解决方案,我使用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);
});
最简单的解决方案是CSS。加上一些像……
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
工作小提琴
你有这样的代码:
<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();
})
})
})
这工作得很好,这里是解释:我们有一个按钮,和一个菜单。当我们悬停按钮时,我们会显示菜单,当我们将鼠标移出按钮时,我们会在100ms后隐藏菜单。如果你想知道我为什么使用它,是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时,时间会被重置,你可以在那里停留多长时间都行。当您退出菜单时,我们将立即隐藏菜单,没有任何超时。
我已经在许多项目中使用了这段代码,如果您在使用它时遇到任何问题,请随时向我提问。
对于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');
}
}
});
你可以使用jQuery的悬停函数。
您只需要在鼠标进入时添加类打开,并在鼠标离开下拉菜单时删除类。
这是我的代码:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});