我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
这里是JSFiddle -> https://jsfiddle.net/PRkonsult/mn31qf0p/1/
底部的JavaScript部分是真正起作用的部分。
HTML
<!--http://getbootstrap.com/components/#navbar-->
<div class="body-wrap">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
CSS
/* Bootstrap dropdown hover menu */
body {
font-family: 'PT Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #4f5d6e;
position: relative;
background: rgb(26, 49, 95);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
}
.body-wrap {
min-height: 700px;
}
.body-wrap {
position: relative;
z-index: 0;
}
.body-wrap: before,
.body-wrap: after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 260px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}
.body-wrap:after {
top: auto;
bottom: 0;
background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}
nav {
margin-top: 60px;
box-shadow: 5px 4px 5px #000;
}
JavaScript代码的重要部分:
$('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);
});
其他回答
引导版本4和5解决方案。(兼容)
这些都是使用mouseover和mouseleave事件和一些屏幕宽度检查的完整解决方案。这比纯CSS解决方案更好。
Bootstrap v5 -纯JS(用于webpack)
export class BootstrapOpenMenuHover {
/**
* Constructor.
*/
constructor() {
this.windowWidth = window.innerWidth;
this.mobileBreakPoint = 991; // Put your menu break point here, when it switches to a hamburger icon.
this.dropdownNavItems = document.querySelectorAll(".dropdown-toggle.nav-link");
this.dropdownMenuItems = document.querySelectorAll(".dropdown-menu");
this.setEventListeners();
}
/**
* Set all of our event listeners.
*/
setEventListeners() {
const _self = this;
// To be safe set the width once the dom is loaded.
window.addEventListener('load', function () {
_self.windowWidth = window.innerWidth;
});
// Keep track of the width in the event of a resize.
window.addEventListener('resize', function () {
_self.windowWidth = window.innerWidth;
});
// Bind our hover events.
if (_self.dropdownNavItems !== null) {
for (let i = 0; i < _self.dropdownNavItems.length; i++) {
// On mouse enter.
_self.dropdownNavItems[i].addEventListener('mouseenter', function () {
if (_self.windowWidth >= _self.mobileBreakPoint) {
this.classList.add('show');
this.ariaExpanded = true;
this.dataset.bsToggle = null;
// Update the .dropdown-menu
this.nextElementSibling.classList.add('show');
this.nextElementSibling.dataset.bsPopper = 'none';
}
});
// On mouse leave.
_self.dropdownNavItems[i].addEventListener('mouseleave', function () {
if (_self.windowWidth >= _self.mobileBreakPoint) {
this.classList.remove('show');
this.ariaExpanded = false;
this.dataset.bsToggle = 'dropdown';
// Update the .dropdown-menu
this.nextElementSibling.classList.remove('show');
this.nextElementSibling.dataset.bsPopper = null;
}
});
}
}
// Bind events to .dropdown-menu items.
if (_self.dropdownMenuItems !== null) {
for (let i = 0; i < _self.dropdownMenuItems.length; i++) {
// On mouse enter.
_self.dropdownMenuItems[i].addEventListener('mouseenter', function () {
if (_self.windowWidth >= _self.mobileBreakPoint) {
this.classList.add('show');
this.dataset.bsPopper = 'none';
// Update the .dropdown-toggle
this.previousElementSibling.classList.add('show');
this.previousElementSibling.ariaExpanded = true;
this.previousElementSibling.dataset.bsToggle = null;
}
});
// On mouse leave.
_self.dropdownMenuItems[i].addEventListener('mouseleave', function () {
if (_self.windowWidth >= _self.mobileBreakPoint) {
this.classList.remove('show');
this.dataset.bsPopper = null;
// Update the .dropdown-toggle
this.previousElementSibling.classList.remove('show');
this.previousElementSibling.ariaExpanded = false;
this.previousElementSibling.dataset.bsToggle = 'dropdown';
}
});
}
}
}
}
const bootstrapOpenMenuHover = new BootstrapOpenMenuHover();
Bootstrap v4方案
这将允许您遵循顶级导航链接。
这是基于桌面和移动平台设计的。随意更改BREAK_POINT变量以满足您的需要:D。
jQuery
var WINDOW_WIDTH;
var BREAK_POINT = 991;
(function ($) {
/** Set window width onload */
WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
/** Set window width if the browser is resized */
$(window).resize(function () {
WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
});
/** Dropdown menu on mouseenter */
$(".nav-item.dropdown").on('mouseenter', function () {
console.log("mouseenter");
if (WINDOW_WIDTH >= BREAK_POINT) {
// Open up the dropdown
$(this).addClass('show'); // add the class show to the li parent
$(this).children('.nav-link').removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
$(this).children('.dropdown-menu').addClass('show'); // add the class show to the dropdown div sibling
}
});
/** Dropdown menu on mouseleave */
$(".nav-item.dropdown").on('mouseleave', function () {
console.log("mouseleave");
if (WINDOW_WIDTH >= BREAK_POINT) {
// Close the dropdown
$(this).removeClass('show'); // add the class show to the li parent
$(this).children('.nav-link').attr('data-toggle', 'dropdown'); // remove the data-toggle attribute so we can click and follow link
$(this).children('.dropdown-menu').removeClass('show'); // add the class show to the dropdown div sibling
}
});
});
CSS
@media(min-width: 768px) {
.dropdown-menu {
margin-top: 0; // fixes closing on slow mouse transition
}
}
最好的方法是用鼠标悬停来触发Bootstrap的点击事件。这样，它应该仍然保持触摸设备友好。
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
这适用于WordPress Bootstrap:
.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
content: none;
}
我们看到，除了“My Head Hurts”的答案，“Cory Price”还发现了两个问题:
问题1:单击下拉链接将打开下拉菜单。它会一直打开，除非用户点击某个地方 或者返回到它上面，创建一个尴尬的UI。 解决方案:从导航链接中删除“class”和“data-toggle”元素
这个解决方案近乎完美，但这里的问题是，当涉及到移动设备和平板电脑时，它就行不通了!
我使用了一些jQuery代码来修复这个问题..
if ($(window).width() > 769) {
$('.dropdown-toggle').removeAttr('data-toggle');
$('.dropdown-menu').removeAttr('style');
$('.dropdown').removeClass('open');
}
$(window).resize(function () {
if ($(window).width() > 769) {
$('.dropdown-toggle').removeAttr('data-toggle');
$('.dropdown-menu').removeAttr('style');
$('.dropdown').removeClass('open');
}
else {
$('.dropdown-toggle').attr("data-toggle", "dropdown");
}
});
注意:这里我们假设移动设备和平板电脑的折痕从768px开始。
如果你有这样一个下拉类的元素(例如):
<ul class="list-unstyled list-inline">
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
<ul class="dropdown-menu">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
<ul class="dropdown-menu">
<li><a href="">Item A</a></li>
<li><a href="">Item B</a></li>
<li><a href="">Item C</a></li>
<li><a href="">Item D</a></li>
<li><a href="">Item E</a></li>
</ul>
</li>
</ul>
然后你可以让下拉菜单自动下拉悬停，而不是必须点击它的标题，通过使用这段jQuery代码:
<script>
$('.dropdown').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
},
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
</script>
这是一个演示
这个答案依赖于@Michael的答案，我做了一些改变，并添加了一些补充，以使下拉菜单正常工作
