我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
这个插件在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
插件模式方法在支持单个计时器等方面更加简洁。
请参阅博客文章了解更多信息。
其他回答
如果你有这样一个下拉类的元素(例如):
<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的答案，我做了一些改变，并添加了一些补充，以使下拉菜单正常工作
这适用于WordPress Bootstrap:
.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
content: none;
}
这样就把上面的隐藏起来了
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
这里有很多非常好的解决方案。但我想我还是把我的放在这里作为另一种选择。这只是一个简单的jQuery代码片段，如果它支持悬停下拉而不是单击，它就会以引导的方式完成。我只测试了版本3，所以我不知道它是否适用于版本2。将其保存为编辑器中的一个片段，按一下键就可以看到它。
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
基本上，它只是说当你悬停在下拉类上时，它会向它添加开放类。这样就可以了。当您停止在带有下拉类的父类li或子类ul/li上悬停时，它将删除打开类。显然，这只是众多解决方案中的一个，您可以对其进行添加，使其仅适用于.dropdown的特定实例。或者向父级或子级添加转换。
引导版本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
}
}
