我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
引导版本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
}
}
其他回答
我基于最新的(v2.0.2) Bootstrap框架创建了一个纯悬停下拉菜单，它支持多个子菜单，我认为我应该发布给未来的用户:
body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form action="" class="navbar-search pull-left"> <input type="text" placeholder="Search" class="search-query span2"> </form> <ul class="nav pull-right"> <li><a href="#">Link</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a class="#" href="#">Menu</a> </li> </ul> </div> <!-- /.nav-collapse --> </div> </div> </div> <hr> <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" id="menu1"> <li> <a href="#">2-level Menu <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </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> <li class="dropdown"> <a href="#">Menu</a> </li> <li class="dropdown"> <a href="#">Menu</a> </li> </ul>
Demo
我希望这能有所帮助。查看链接https://jsfiddle.net/awb7gfb1/
<nav>
<div id="menubar" class=" collapse navbar-collapse row">
<ul id="dropdownNavbar" class="nav navbar-nav">
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-time"></span>
Time Card
<span class="caret"></span></button>
<div class="dropdown-content">
<a id="showTimeCard" href="#">My Time Card</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-stats"></span>
Project
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-user"></span>
HR Links
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-screenshot"></span>
Leave Tracker
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-briefcase"></span>
Accounts
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-headphones"></span>
Service Desk
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-file"></span>
Reports
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-cog"></span>
Settings
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
</ul>
</div>
</nav>
还有CSS
.dropdown {
float: left;
padding-right: 1px;
}
.dropbtn{
border: 0px;
height: 30px;
border-radius: 0px 10px;
}
li button, .dropbtn {
display: inline-block;
color: white;
text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
background-color: #12A5F4;
}
.dropbtn.active {
background: #12A5F4;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e8f3f4;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.navbar-header{
overflow: visible;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8dee2
}
.dropdown:hover .dropdown-content {
display: block;
}
#menubar{
padding-top: 5px;
overflow: visible;
z-index: 10;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
#dropdownNavbar{
margin: 0px;
}
.navbar-toggle{
background-color: #3382d5;
}
.navbar-toggle span{
background-color: white;
}
这可能是一个愚蠢的想法，但要删除指向向下的箭头，您可以删除
<b class="caret"></b>
不过，这对向上的那个没有任何作用……
<!DOCTYPE html> <html> <head> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>Hoverable Dropdown</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html>
Bootstrap 4, 2019
我读了很多这样的答案，但最后我自己做了，因为这不是我需要的。
我有引导4，并希望保持点击+悬停功能。此外，我想启用它只有下拉有一个额外的类“.open-on-hover”。
我还想保持Bootstrap的Jquery定位下拉菜单时，它是旁边的页面边缘。所以我们不仅仅要做"display: block"我们想要完整的Bootstrap工作方式。所以我只是触发点击。
逻辑是，如果它是mouseenter则打开它，如果它是mouseleave则隐藏它，如果它是打开的
/**
* Open Bootstrap 4 dropdown on hover
*/
$(document).on('mouseenter mouseleave', '.dropdown.open-on-hover', function(e)
{
let toggler = $(this).find('[data-toggle="dropdown"]').first();
if(e.type === 'mouseenter') {
$(toggler).trigger('click', 'open');
} else if ($(this).children('.dropdown-menu.show').length) {
$(toggler).trigger('click', 'close');
}
});
html
<div class="dropdown open-on-hover">
<div class="btn" data-toggle="dropdown">
Hover or click me
</div>
<div class="dropdown-menu">
<a class="dropdown-item">
Item 1
</a>
<a class="dropdown-item">
Item 2
</a>
</div>
</div>
推荐文章
- 如何以编程方式触发引导模式?
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 如何使用Twitter的Bootstrap内联显示列表
- 相对定位一个元素，而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
