我需要的很简单。
我已经设置了一个导航栏，其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown")，它工作得很好。
事情是它工作“onClick”，而我宁愿如果它工作“onHover”。
有什么内置的方法可以做到这一点吗?
当前回答
这将帮助你创建你自己的用于引导的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，这也适用于输入附加下拉。
其他回答
你可以使用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');
});
这是我使用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');
});
});
通过添加属性display:block，在悬停时工作，并在单击时保持关闭;在CSS中删除这些属性data-toggle="dropdown" role="button"从按钮标签
.dropdown:hover .dropdown-menu { display: block; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle">Dropdown Example</button> <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> </body> </html>
使用jQuery的一个简单方法是:
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});
用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();
}
}
});
