我需要的很简单。
我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"),它工作得很好。
事情是它工作“onClick”,而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
我需要的很简单。
我已经设置了一个导航栏,其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown"),它工作得很好。
事情是它工作“onClick”,而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
当前回答
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});
其他回答
你可以使用Jquery实现这个功能:
$('.dropdown').on('mouseover', function(){
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
});
最好的方法是用悬停来触发引导点击事件。这样,它应该仍然保持触摸设备友好
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
悬停在导航项上,看到它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
使用mouseover()函数触发单击。这样就不会对以前的点击事件造成伤害。用户可以使用悬停和点击/触摸。它将是移动友好的。
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
用jquery的Bootstrap 5版本
只需添加悬停类下拉和添加以下代码到主javascript文件
// Hoverable dropdown
$('.dropdown.hoverable').on({
mouseenter: function(){
var dropdown = $(this).children('.dropdown-menu');
if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
},
mouseleave: function(){
var dropdown = $(this).children('.dropdown-menu');
if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
}
});