我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
内联使用两个链接。用下拉按钮隐藏链接,并在可见链接上添加onmouseover事件以单击下拉菜单。
<a class="pretty-button"
href="#" alt="Notifications"
onmouseover="$('#notifications-dropdown').click()">
</a>
<a style="display:none"
id="notifications-dropdown"
class="js-nav js-tooltip js-dynamic-tooltip"
href="#"
alt="Notifications"
data-toggle="dropdown">
<span class="fa fa-flag fa-2x"></span>
</a>
其他回答
只是想补充一下,如果你有多个下拉列表(就像我一样),你应该这样写:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
它会正常工作的。
只需三行代码自定义您的CSS样式
.dropdown:hover .dropdown-menu {
display: block;
}
这是Bootstrap 3内置的。 只需将此添加到您的CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
引导版本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
}
}
版本2的解决方案非常简单,只有CSS。 保持相同的友好功能的手机和平板电脑。
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}