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