我需要的很简单。
我已经设置了一个导航栏，其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown")，它工作得很好。
事情是它工作“onClick”，而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
当前回答
对于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');
}
}
});
其他回答
用悬停触发单击事件有一个小错误。如果鼠标进入，然后点击会产生相反的效果。鼠标移出时打开，鼠标移进时关闭。一个更好的解决方案:
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
在Twitter Bootstrap没有实现，但你可以使用这个插件
更新1:
同样的问题
最简单的解决方案是CSS。加上一些像……
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
工作小提琴
这只在你不在移动设备上时悬浮导航栏，因为我发现在移动设备上悬浮导航栏并不好:
$( 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' );
}
});
});
尝试使用带有淡出淡出动画的悬停功能
$('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);
});
