Html 如何在 Bootstrap v4 中实现导航栏下拉悬停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42183672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement a Navbar Dropdown Hover in Bootstrap v4?
提问by Exprove
I am a bit confused on the new bootstrap version since they changed dropdown menus to divs:
我对新的引导程序版本有点困惑，因为他们将下拉菜单更改为 div：
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code (only css and script from bootstrap)? I already saw the bootstrap css classes and I can't relate with the ones in bootstrap V3 (I accomplish this without adding jquery in V3).
你们有没有想法在该片段的下拉链接中获得悬停下拉菜单而不添加额外的脚本代码（仅来自引导程序的 css 和脚本）？我已经看到了 bootstrap css 类，我无法与 bootstrap V3 中的那些相关联（我没有在 V3 中添加 jquery 就完成了这个）。
回答by tao
Simple, CSS onlysolution:
简单的、仅 CSS 的解决方案：
.dropdown:hover>.dropdown-menu {
display: block;
}
When clicked, it will still get the class showtoggled to it (and will remain open when no longer hovered).
单击时，它仍然会将类show切换到它（并且不再悬停时将保持打开状态）。
To get around this properlyis to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleaveand :hover. Should work smoothly, intuitively, while not interfering at allwith how the dropdown works on touch based devices. Try it out, let me know if it works for you:
要正确解决此问题，请使用为基于指针的设备保留的事件和属性：jQuery 的mouseenter,mouseleave和:hover. 如果工作顺利，直觉，而不是干扰都与下拉如何工作的触摸设备。试试看，让我知道它是否适合你：
Complete jQuery solution(touchuntouched):
完整的jQuery 解决方案（触摸未触及）：
Pre v4.1.2 solution (deprecated):
v4.1.2 之前的解决方案（已弃用）：
$('body').on('mouseenter mouseleave','.dropdown',function(e){
var _d=$(e.target).closest('.dropdown');
if (e.type === 'mouseenter')_d.addClass('show');
setTimeout(function(){
_d.toggleClass('show', _d.is(':hover'));
$('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
},300);
});
$('body').on('mouseenter mouseleave','.dropdown',function(e){
var _d=$(e.target).closest('.dropdown');
if (e.type === 'mouseenter')_d.addClass('show');
setTimeout(function(){
_d.toggleClass('show', _d.is(':hover'));
$('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
},300);
});
/* this is not needed, just prevents page reload when a dd link is clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href>Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href>Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href>Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href>Action</a>
<a class="dropdown-item" href>Another action</a>
<a class="dropdown-item" href>Something else here</a>
</div>
</li>
</ul>
</div>
</nav>v4.1.2 shiplistintroduced this changeto how dropdowns work, making the solution above no longer work.
Here's the up to datesolution for having the dropdown open on hover in v4.1.2and above:
v4.1.2 shiplist引入了对下拉列表工作方式的更改，使上述解决方案不再有效。
这是在v4.1.2及更高版本中悬停时打开下拉菜单的最新解决方案：
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
/* not needed, prevents page reload for SO example on menu link clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>Important note:If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggleis clicked or when an menu option is clicked).
重要提示：如果使用 jQuery 解决方案，删除 CSS 很重要（否则在.dropdown-toggle单击或单击菜单选项时下拉列表不会关闭）。
回答by Mohammad Ayoub Khan
Just Add this simple csscode in your style-sheet and you are ready to go.
只需在您的样式表中添加这个简单的css代码，您就可以开始使用了。
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
回答by LionelW
Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.
Andrei 的“完整” jQuery+CSS 解决方案具有正确的意图，但它冗长而且仍然不完整。不完整，因为虽然它可能涵盖了所有必要的 DOM 更改，但它缺少自定义事件的触发。冗长，因为当 Bootstrap 已经提供dropdown() 方法时它是轮子重新发明，它可以完成所有事情。
So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:
因此，不依赖于其他答案中经常重复的 CSS hack 的正确的 DRY 解决方案就是 jQuery：
$('body').on('mouseover mouseout', '.dropdown', function(e) {
$(e.target).dropdown('toggle');
});
回答by Zim
Bootstrap 4 CSS-only
Bootstrap 4 仅 CSS
None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.
没有一个 CSS 只有答案完全有效。单击后下拉菜单保持打开状态，或者在您到达要单击的菜单链接之前，有一个间隙使下拉菜单隐藏。
Here's the simple CSS only solution:
这是仅使用 CSS 的简单解决方案：
.navbar-nav li:hover .dropdown-menu {
display: block;
}
Remove data-toggle=dropdownfrom the HTML markup to prevent the dropdown staying open in click. Use mt-0(margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.
data-toggle=dropdown从 HTML 标记中删除以防止下拉菜单在单击时保持打开状态。使用mt-0(margin-top:0) 消除菜单上方的间隙，并使悬停菜单项成为可能。
Demo https://www.codeply.com/go/awyU7VTIJf
演示https://www.codeply.com/go/awyU7VTIJf
Complete Code:
完整代码：
.navbar-nav li:hover .dropdown-menu {
display: block;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
..
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
Dropdown
</a>
<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
回答by Mike Bogochow
Bootstrap's functionality appears to have changed slightly since v4 has been released. The .dropdown-menuitem appears to also now get the .showclass in addition to the .dropdown. I adapted Andrei's answer to also toggle the class on the .dropdown-menu. Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md.
自 v4 发布以来，Bootstrap 的功能似乎略有变化。该.dropdown-menu项目似乎到现在也得到了.show类除.dropdown。我改编了安德烈的回答，也可以在.dropdown-menu. 请注意，不再需要 CSS 并且 HTML 是相同的，除了我更新了当前版本的链接并且导航类更改为navbar-expand-md.
$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
var dropdown = $(e.target).closest('.dropdown');
var menu = $('.dropdown-menu', dropdown);
dropdown.addClass('show');
menu.addClass('show');
setTimeout(function () {
dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
}, 300);
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>回答by DerekOBrien
I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.
当我被要求将其更改为悬停交互时，我已经使用并设置了导航栏的样式，因此最终将其作为使用 jQuery 的修复程序。
function bootstrapHoverMenu (bp = 768) {
// close all dropdowns that are open
$('body').click( function (e) {
$('.dropdown-menu.show').removeClass('show');
});
// show dropdown for the link clicked
$('.nav-item').hover(function (e) {
$('.dropdown-menu.show').removeClass('show');
if(( $(window).width() >= bp )) {
$dd = $(this).find('.dropdown-menu');
$dd.addClass('show');
}
});
// get href for top level link if clicked and open
$('.dropdown').click(function (e) {
if( $(window).width() < bp ) {
$('.dropdown-menu').css({'display': 'none'});
}
$href = $(this).find('.nav-link').attr('href');
window.open($href, '_self');
});
}
$(document).ready( function() {
// when page ready run the fix
bootstrapHoverMenu();
});
Downside is mobile only has top level links.
缺点是移动设备只有顶级链接。
回答by Radmation
Bootstrap v4 Solution - jQuery based, but better than a pure css solution
Bootstrap v4 解决方案 - 基于 jQuery，但比纯 css 解决方案更好
This ensures that you can still follow top level link clicks and is compatible with mobile.
这可确保您仍然可以关注顶级链接点击次数并与移动设备兼容。
This was built with desktop and mobile in mind. Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px.
这是在考虑桌面和移动设备的情况下构建的。随意用一个检查窗口宽度是否大于 768px 的条件来包装 jQuery。
jQuery
jQuery
/** Dropdown on hover */
$(".nav-link.dropdown-toggle").hover( function () {
// Open up the dropdown
$(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
$(this).parent().addClass('show'); // add the class show to the li parent
$(this).next().addClass('show'); // add the class show to the dropdown div sibling
}, function () {
// on mouseout check to see if hovering over the dropdown or the link still
var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
var isThisHovered = $(this).filter(":hover").length; // check the top level item for hover
if(isDropdownHovered || isThisHovered) {
// still hovering over the link or the dropdown
} else {
// no longer hovering over either - lets remove the 'show' classes
$(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
$(this).parent().removeClass('show');
$(this).next().removeClass('show');
}
});
// Check the dropdown on hover
$(".dropdown-menu").hover( function () {
}, function() {
var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
var isThisHovered= $(this).filter(":hover").length; // check the top level item for hover
if(isDropdownHovered || isThisHovered) {
// do nothing - hovering over the dropdown of the top level link
} else {
// get rid of the classes showing it
$(this).parent().removeClass('show');
$(this).removeClass('show');
}
});
CSS
CSS
@media(min-width: 768px) {
.dropdown-menu {
margin-top: 0; // fixes closing on slow mouse transition
}
}
回答by jay padaliya
Hoverable dropdown without losing functionality of popper.js for bootstrap 4 only
可悬停下拉菜单，而不会丢失 popper.js 的功能，仅适用于 bootstrap 4
Javascript
Javascript
$('.dropdown-hoverable').hover(function(){
$(this).children('[data-toggle="dropdown"]').click();
}, function(){
$(this).children('[data-toggle="dropdown"]').click();
});
HTML
HTML
<nav class="nav">
<li class="nav-item dropdown dropdown-hoverable">
<a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">Menu link</a>
<ul class="dropdown-menu">
</ul>
</li>
</nav>
回答by Mike
CSS solutions not working properly on touch device
CSS 解决方案在触摸设备上无法正常工作
I found that any CSS solutions made the menu stay open on touch devices, they didn't collapse anymore.
So I read the article: https://www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/(by Brian Shim)
Very useful! It states that a touch device always first checks the existence of a hover class on an element.
But: by using jQuery .show() you introduce a style attribute (display:block;) that makes the menu open up on first touch. Now the menu has opened without the bootstrap 'show' class. If a user chooses a link from the dropdown menu it works perfectly. But if a user decides to close the menu without using it he has to tap twice to close the menu: At the first tap the original bootstrap 'show' class gets attached so the menu opens up again, at the second tap the menu closes due to normal bootstrap behaviour (removal of 'show' class).
我发现任何 CSS 解决方案都使菜单在触摸设备上保持打开状态，它们不再折叠。
所以我读了这篇文章：https: //www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/(by Brian Shim)
非常有用！它指出触摸设备总是首先检查元素上是否存在悬停类。
但是：通过使用 jQuery .show() 您引入了一个样式属性 (display:block;)，它使菜单在第一次触摸时打开。现在菜单已经打开，没有引导程序“显示”类。如果用户从下拉菜单中选择一个链接，它就可以完美运行。但是如果用户决定不使用它就关闭菜单，他必须点击两次才能关闭菜单：在第一次点击时，原始引导程序“show”类被附加，因此菜单再次打开，在第二次点击时菜单关闭到正常的引导行为（删除“显示”类）。
To prevent this I used the article: https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685(by David Gilbertson)
为了防止这种情况，我使用了这篇文章：https: //codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685（David Gilbertson）
He has some very handy ways of detecting touch or hover devices.
他有一些非常方便的方法来检测触摸或悬停设备。
So, combined the two authors with a bit jQuery of my own:
因此，将两位作者与我自己的一些 jQuery 结合起来：
$(window).one('mouseover', function(){
window.USER_CAN_HOVER = true;
if(USER_CAN_HOVER){
jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
var $parent = jQuery(this);
var $dropdown = $parent.children('ul');
$dropdown.show(200,function() {
$parent.mouseleave(function() {
var $this = jQuery(this);
$this.children('ul').fadeOut(200);
});
});
});
};
}); Check once if a device allows a hover event. If it does, introduce the possibility to hover using .show(). If the device doesn't allow a hover event, the .show() never gets introduced so you get natural bootstrap behaviour on touch device.
}); 检查一次设备是否允许悬停事件。如果是，请引入使用 .show() 悬停的可能性。如果设备不允许悬停事件，则 .show() 永远不会被引入，因此您可以在触摸设备上获得自然的引导行为。
Be sure to remove any CSS regarding menu hover classes.
请务必删除有关菜单悬停类的任何 CSS。
Took me three days :) so I hope it helps some of you.
我花了三天 :) 所以我希望它可以帮助你们中的一些人。
回答by Fisherman
I think this simply just work with bootstrap 4, i adding in inline but you always can bind event from script.
我认为这仅适用于 bootstrap 4，我添加了内联，但您始终可以从脚本绑定事件。
<a
onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
class="nav-link dropdown-toggle"
href="http://example.com"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown link
</a>
