我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
这里是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);
});
其他回答
为了让菜单在悬停时自动下落，这可以使用基本的CSS实现。您需要计算出隐藏菜单选项的选择器，然后将其设置为在适当的li标记悬停时显示为块。以twitter引导页面为例，选择器如下所示:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
然而，如果你正在使用Bootstrap的响应特性，你将不希望这个功能出现在折叠的导航栏上(在较小的屏幕上)。为了避免这种情况，可以将上面的代码包装在媒体查询中:
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
要隐藏箭头(插入符号)，这取决于你是使用Twitter Bootstrap版本2或更低版本3，以不同的方式完成:
引导3
要在版本3中删除插入符号，你只需要从.dropdown-toggle锚定元素中删除HTML <b class="插入符号"></b>:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2 &更低
要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议更详细地了解:after伪元素是如何工作的。为了让你开始理解，在推特引导例子中瞄准并删除箭头，你将使用以下CSS选择器和代码:
a.menu:after, .dropdown-toggle:after {
content: none;
}
如果你深入研究这些方法，而不是仅仅使用我给你的答案，这会对你有利。
感谢@CocaAkat指出，我们错过了“>”子组合子，以防止子菜单显示在父悬停
这个插件在GitHub上，我正在做一些改进(比如只使用数据属性(不需要JS))。我把代码留在下面，但它与GitHub上的不一样。
我喜欢纯CSS版本，但它在关闭前有一个延迟是很好的，因为它通常是一个更好的用户体验(即不会因为鼠标滑到下拉框外1px而受到惩罚，等等)，并且正如评论中提到的，有1px的边缘，你必须处理，或者有时当你从原始按钮移动到下拉框时，导航意外关闭，等等。
我创建了一个快速的小插件，我已经在几个网站上使用了，它工作得很好。每个导航项都是独立处理的，所以它们都有自己的延迟计时器等。
JS
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this).parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
options = $.extend(true, {}, defaults, options, data),
timeout;
$this.hover(function() {
if(options.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$(this).addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$this.removeClass('open');
}, options.delay);
});
});
};
delay参数是不言自明的，而instantlyCloseOthers会在鼠标悬停在一个新下拉列表上时立即关闭所有其他打开的下拉列表。
不是纯粹的CSS，但希望能在这个晚些时候帮助其他人(即这是一个旧线程)。
如果您愿意，您可以看到我通过以下要点中的不同步骤(在#concrete5 IRC上的讨论中)使其工作的不同过程:https://gist.github.com/3876924
插件模式方法在支持单个计时器等方面更加简洁。
请参阅博客文章了解更多信息。
引导版本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
}
}
除了来自“我的头很疼”的答案(这很棒):
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
有两个挥之不去的问题:
单击下拉链接将打开下拉菜单。而且它会一直打开，除非用户点击其他地方，或者将鼠标悬停在它上面，创建一个尴尬的UI。 下拉链接和下拉菜单之间有1px的空白。如果您在下拉菜单和下拉菜单之间缓慢移动，这将导致下拉菜单变得隐藏。
(1)的解决方案是从nav链接中删除“class”和“data-toggle”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
这还使您能够创建到父页面的链接——这在默认实现中是不可能的。您只需将“#”替换为您想要发送给用户的任何页面。
(2)的解决方案是删除.下拉菜单选择器上的margin-top
.navbar .dropdown-menu {
margin-top: 0px;
}
使用jQuery会更好:
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).show();
jQuery(this).addClass('open');
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).hide();
jQuery(this).removeClass('open');
});
