好的，所以我需要的很简单。
我已经设置了一个导航栏，里面有一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），它工作正常。
问题是它可以工作“onClick”，而我更喜欢它是否工作“onHover”。
有没有内置的方法可以做到这一点？
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap
最简单的解决方案是使用 CSS。添加类似...
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
【讨论】：
data-toggle 属性以使父项可点击...只需注意移动屏幕上的附带损害。
最好的方法是通过悬停触发引导点击事件。这样，它仍然应该保持对触摸设备友好
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
【讨论】：
你可以使用jQuery的悬停功能。
您只需要在鼠标进入时添加类open，并在鼠标离开下拉菜单时删除类。
这是我的代码：
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
【讨论】：
show 而不是 open，并且还包括 dropdown-menu: $('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');}, function() {$(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show');});（抱歉格式化。）
使用 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);
});
});
【讨论】：
.first() - $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200); ...
对于 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');
}
}
});
【讨论】：
【讨论】：
将鼠标悬停在导航项目上以查看它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
【讨论】：
所以你有这个代码：
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
通常它适用于点击事件，您希望它适用于悬停事件。这很简单，只需使用这个 javascript/jquery 代码：
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
这很好用，解释如下：我们有一个按钮和一个菜单。当我们将鼠标悬停在按钮上时，我们会显示菜单，当我们将鼠标悬停在按钮上时，我们会在 100 毫秒后隐藏菜单。如果您想知道我为什么使用它，是因为您需要时间将光标从按钮上拖到菜单上。当您在菜单上时，时间会被重置，您可以在此处停留任意时间。当您退出菜单时，我们会立即隐藏菜单，不会有任何超时。
我在很多项目中都使用过这段代码，如果你在使用中遇到任何问题，请随时向我提问。
【讨论】：
这就是我用一些 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');
});
});
【讨论】：
我已经为下拉悬停功能发布了一个合适的插件，您甚至可以在其中定义单击 dropdown-toggle 元素时会发生什么：
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
我对所有以前存在的解决方案都有疑问。简单的 CSS 并没有使用 .dropdown 上的 .open 类，因此当下拉菜单可见时，下拉切换元素不会有任何反馈。
js 会干扰点击.dropdown-toggle，因此下拉菜单会在悬停时显示，然后在点击打开的下拉菜单时将其隐藏，移出鼠标会触发下拉菜单再次显示。一些 js 解决方案正在破坏 iOS 兼容性，一些插件无法在支持触摸事件的现代桌面浏览器上运行。
这就是为什么我制作了 Bootstrap Dropdown Hover 插件，它通过仅使用标准 Bootstrap javascript API 来防止所有这些问题，而无需任何 hack。
【讨论】：
尝试使用带有淡入淡出动画的悬停功能
$('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：
/* 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>
如果要删除 onclick open，请不要忘记删除按钮属性 data-toggle="dropdown"，当输入附加下拉菜单时，这也将起作用。
【讨论】：
这只会在您不在移动设备上时悬停导航栏，因为我发现悬停导航在移动设备上效果不佳：
$( 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' );
}
});
});
【讨论】：
我尝试了其他解决方案，我正在使用 bootstrap 3，但下拉菜单关闭得太快而无法移动
假设你给li加了class="dropdown"，我加了一个超时
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});
【讨论】：
使用hover 触发click 事件有一个小错误。如果mouse-in 然后click 会产生反之亦然的效果。当mouse-out 时为opens，当mouse-in 时为close。更好的解决方案：
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
【讨论】：
$('.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)
});
【讨论】：
html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <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>
jquery
$(document).ready( function() {
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function() {
$(this).find('ul').css({
"display": "block",
"margin-top": 0
});
},
function() {
$(this).find('ul').css({
"display": "none",
"margin-top": 0
});
}
);
});
【讨论】：
Bootstrap 下拉菜单 在悬停时工作，并通过在 CSS 中添加属性 display:block; 并删除这些属性 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>【讨论】：
我提出的解决方案检测它是否不是触摸设备并且navbar-toggle（汉堡菜单）不可见并使父菜单项在悬停时显示子菜单和跟随点击它的链接。
也使 tne margin-top 0 因为导航栏和某些浏览器中的菜单之间的间隙不允许您将鼠标悬停在子项上
$(function(){
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if(!is_touch_device() && $('.navbar-toggle:hidden')){
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>$(function(){
$("#nav .dropdown").hover(
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>【讨论】：
使用mouseover() 函数触发点击。这样之前的点击事件就不会有害了。用户可以同时使用悬停和点击/触摸。它将是移动友好的。
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
【讨论】：
您使用 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');
});
【讨论】：