我需要的很简单。
我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"),它工作得很好。
事情是它工作“onClick”,而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
我需要的很简单。
我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"),它工作得很好。
事情是它工作“onClick”,而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
当前回答
在Twitter Bootstrap没有实现,但你可以使用这个插件
更新1:
同样的问题
其他回答
最简单的解决方案是CSS。加上一些像……
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
工作小提琴
这将帮助你创建你自己的用于引导的hover类:
CSS:
/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-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>
不要忘记删除按钮属性data-toggle="dropdown"如果你想删除onclick open,这也适用于输入附加下拉。
尝试使用带有淡出淡出动画的悬停功能
$('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);
});
对于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');
}
}
});
使用mouseover()函数触发单击。这样就不会对以前的点击事件造成伤害。用户可以使用悬停和点击/触摸。它将是移动友好的。
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})