如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表
我想让我的Bootstrap菜单在悬停时自动下拉，而不必单击菜单标题。我还想丢失菜单标题旁边的小箭头。
43 个答案:
答案 0 :(得分：900)
要使菜单在悬停时自动停止，则可以使用基本CSS实现。您需要将选择器设置为隐藏菜单选项，然后将其设置为在相应的li标记悬停时显示为块。以twitter bootstrap页面为例，选择器如下：
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：
Bootstrap 3
要删除版本3中的插入符号，只需从<b class="caret"></b>锚元素中删除HTML .dropdown-toggle：
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2＆amp;下
要删除版本2中的插入符号，您需要更深入地了解CSS，我建议更详细地查看:after伪元素的工作原理。为了让您开始理解，定位和删除twitter bootstrap示例中的箭头，您将使用以下CSS选择器和代码：
a.menu:after, .dropdown-toggle:after {
content: none;
}
如果你进一步研究这些工作的方式而不仅仅是使用我给你的答案，它将对你有利。
感谢@CocaAkat指出我们错过了＆＃34;＆gt;＆＃34;子组合器，以防止父菜单上显示子菜单
答案 1 :(得分：562)
我基于最新的（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>
答案 2 :(得分：226)
除了“My Head Hurts”的回答（很棒）：
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
有两个挥之不去的问题：
- 点击下拉菜单链接将打开下拉菜单。它将保持开放状态，除非用户点击其他地方，或者将其悬停在其上，从而创建一个尴尬的用户界面。
- 下拉菜单和下拉菜单之间有1px的差距。如果您在下拉菜单和下拉菜单之间缓慢移动，则会导致下拉菜单隐藏。
（1）的解决方案是从导航链接中删除“class”和“data-toggle”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
这也使您能够创建指向父页面的链接 - 这在默认实现中是不可能的。您可以将“＃”替换为您要向用户发送的任何页面。
（2）的解决方案是删除.dropdown菜单选择器
上的margin-top.navbar .dropdown-menu {
margin-top: 0px;
}
答案 3 :(得分：126)
我使用了一些jQuery：
// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
答案 4 :(得分：67)
只需在三行代码中自定义CSS样式
.dropdown:hover .dropdown-menu {
display: block;
}
答案 5 :(得分：67)
这里有很多非常好的解决方案。但是我想我会继续把我的作为另一种选择。它只是一个简单的jQuery代码片段，如果它支持将鼠标悬停在下拉菜单而不是单击时，它就像引导程序一样。我只用版本3对它进行了测试，所以我不知道它是否适用于版本2.将它保存为编辑器中的一个片段，然后按键移动它。
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
基本上，它只是说当你将鼠标悬停在下拉列表上时，它会向它添加开放类。然后就行了。当您停止使用下拉类或子ul / li徘徊在父li上时，它将删除打开的类。显然，这只是众多解决方案中的一种，您可以添加它以使其仅适用于.dropdown的特定实例。或者向父母或孩子添加转换。
答案 6 :(得分：22)
如果你有一个dropdown类的元素（例如）：
<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 answer，我做了一些更改并添加了一些新增内容以使下拉菜单正常工作
答案 7 :(得分：20)
[更新] 该插件位于GitHub，我正在进行一些改进（例如仅使用数据属性（不需要JS）。我已将代码留在下面，但它与GitHub上的内容不同。
我喜欢纯粹的CSS版本，但是在它关闭之前有一个延迟是很好的，因为它通常是一个更好的用户体验（即不会因为在下拉列表外1 px的鼠标滑动而受到惩罚等），并且如上所述在评论中，你需要处理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
插件模式方法更加清晰，可以支持个人计时器等。
有关详情，请参阅blog post。
答案 8 :(得分：15)
这对我有用：
.dropdown:hover .dropdown-menu {
display: block;
}
答案 9 :(得分：11)
这是内置于Bootstrap 3中的。 只需将其添加到您的CSS：
.dropdown:hover .dropdown-menu {
display: block;
}
答案 10 :(得分：10)
使用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');
});
答案 11 :(得分：9)
您可以使用默认的$().dropdown('toggle')方法在悬停时切换下拉菜单：
$(".nav .dropdown").hover(function() {
$(this).find(".dropdown-toggle").dropdown("toggle");
});
答案 12 :(得分：8)
最好的方法是用悬停触发Bootstrap的点击事件。这样，它仍然应该保持触摸设备友好。
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
答案 13 :(得分：8)
只想添加，如果您有多个下拉菜单（就像我一样），您应该写：
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
它会正常工作。
答案 14 :(得分：7)
在我看来，最好的方法是这样的：
;(function($, window, undefined) {
// 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 = $this.parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function(event) {
// So a neighbor can't open the dropdown
if(!$parent.hasClass('open') && !$this.is(event.target)) {
return true;
}
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$parent.removeClass('open');
}, settings.delay);
});
// This helps with button groups!
$this.hover(function() {
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
});
// Handle submenus
$parent.find('.dropdown-submenu').each(function(){
var $this = $(this);
var subTimeout;
$this.hover(function() {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').show();
// Always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').hide();
}, function() {
var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function() {
$submenu.hide();
}, settings.delay);
});
});
});
};
$(document).ready(function() {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);
示例标记：
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
</li>
答案 15 :(得分：7)
我按照以下方式管理：
$('ul.nav li.dropdown').hover(function(){
$(this).children('ul.dropdown-menu').slideDown();
}, function(){
$(this).children('ul.dropdown-menu').slideUp();
});
我希望这有助于某人...
答案 16 :(得分：5)
还添加了margin-top：0来重置.dropdown-menu的bootstrap css边距，这样当用户从下拉菜单慢慢地盘旋到菜单列表时，菜单列表就会消失。
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
答案 17 :(得分：5)
这可能是一个愚蠢的想法，但只要删除指向下方的箭头，就可以删除
<b class="caret"></b>
这对于指向一个人没有任何帮助，但是......
答案 18 :(得分：5)
我已经为Bootstrap 3下拉悬停功能发布了正确的插件，您甚至可以在其中定义点击dropdown-toggle元素时发生的情况（可以禁用点击）：
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
为什么我在有很多解决方案的时候就成功了？
我遇到了所有以前存在的解决方案的问题。简单的CSS没有使用.open上的.dropdown类，因此当下拉列表可见时，下拉切换元素将不会有任何反馈。
js正在干扰点击.dropdown-toggle，因此下拉列表显示下拉列表，然后点击打开的下拉菜单时隐藏它，移出鼠标会触发下拉菜单显示再次。一些js解决方案破坏了iOS的兼容性，一些插件不适用于支持触摸事件的现代桌面浏览器。
这就是为什么我制作了Bootstrap Dropdown Hover 插件，它可以通过仅使用标准的Bootstrap javascript API来防止所有这些问题，而无需任何黑客。即使是Aria属性也能正常使用这个插件。
答案 19 :(得分：4)
html答案 20 :(得分：4)
使用此代码在鼠标悬停（仅限桌面）上打开子菜单：
$('ul.nav li.dropdown').hover(function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').show();
}
}, function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').hide().css('display','');
}
});
如果您希望第一级菜单可以点击，即使在移动设备上也可以添加：
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
子菜单（下拉菜单）将通过鼠标悬停在桌面上打开，并通过手机和平板电脑上的点击/触摸来打开。
子菜单打开后，第二次单击将允许您打开链接。
感谢if ($(window).width() > 767)，子菜单将采用移动设备的全屏宽度。
答案 21 :(得分：3)
jQuery解决方案很好，但它需要处理点击事件（针对移动设备或平板电脑），因为悬停不能正常工作......可能会进行一些窗口重新检测大小吗？
Andres Ilich的回答似乎运作良好，但它应该包含在媒体查询中：
@media (min-width: 980px) {
.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;
}
}
答案 22 :(得分：3)
这会隐藏起来的
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
答案 23 :(得分：3)
如果它们小于平板电脑，这应该隐藏下拉及其插入物。
@media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
答案 24 :(得分：2)
这适用于Bootstrap V4
JS：
<script>
$(function() {
$('.dropdown-hover').hover(
function() { $(this).addClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded', true); $(this).find('.dropdown-menu').addClass('show'); },
function() { $(this).removeClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded',false); $(this).find('.dropdown-menu').removeClass('show'); }
);
});
</script>
Vanilla Bootstrap 4下拉HTML，除了添加了drop-hover类：
<div class="dropdown dropdown-hover">
<button class="btn btn-text dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
如果您不想使用.dropdown-hover类有选择地启用悬停功能，则只需将jquery选择器从.dropdown-hover更改为.dropdown。
答案 25 :(得分：2)
版本2的非常简单的解决方案，仅CSS。 保持与手机和平板电脑相同的友好功能。
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
答案 26 :(得分：2)
这是JSFiddle - ＆gt; 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);
});
答案 27 :(得分：2)
这也可以做到。
select2-ApplicantTitle-container如果下拉菜单在悬停的元素之间有间隙，则下拉菜单将立即关闭，如此GIF所示
为防止此行为，您可以向
$('.dropdown').on('mouseover',function(){
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
$(this).find('.dropdown-menu').hide();
});
ms事件添加超时
100 
答案 28 :(得分：2)
要增强Sudharshan's answer，我将其包装在媒体查询中，以防止在XS显示宽度时悬停......
@media (min-width:768px)
{
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
}
此外，不需要标记中的插入符号，只需 li 的下拉列表类。
答案 29 :(得分：2)
对于插入符号...我还没有看到任何一个指定完全阻止插入符号的简单CSS。
你走了：
.caret {
display: none !important;
}
答案 30 :(得分：2)
所以你有这个代码：
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
通常它适用于点击事件，您希望它适用于悬停事件。这很简单，只需使用这个JavaScript / jQuery代码：
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
这很有效，这里有解释：我们有一个按钮和一个菜单。当我们悬停按钮时，我们显示菜单，当我们鼠标按下按钮时，我们会在100毫秒后隐藏菜单。如果你想知道为什么我使用它，是因为你需要时间从菜单上的按钮拖动光标。当您在菜单上时，时间会重置，您可以根据需要随时停留。当您退出菜单时，我们会立即隐藏菜单而不会超时。
我在很多项目中都使用过此代码，如果您在使用它时遇到任何问题，请随时向我提问。
答案 31 :(得分：2)
这是我的技术，在您停止悬停在菜单或切换按钮上之后，在菜单关闭之前会稍微延迟。您通常点击以显示导航菜单的<button>为#nav_dropdown。
$(function() {
var delay_close_it, nav_menu_timeout, open_it;
nav_menu_timeout = void 0;
open_it = function() {
if (nav_menu_timeout) {
clearTimeout(nav_menu_timeout);
nav_menu_timeout = null;
}
return $('.navbar .dropdown').addClass('open');
};
delay_close_it = function() {
var close_it;
close_it = function() {
return $('.navbar .dropdown').removeClass('open');
};
return nav_menu_timeout = setTimeout(close_it, 500);
};
$('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});
答案 32 :(得分：2)
使用此脚本覆盖bootstrap.js。
jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
$(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
var na = $(this)
na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});
$('.dropdown-submenu').hover(function() {
$(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
var na = $(this)
na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});
});
答案 33 :(得分：2)
这适用于WordPress Bootstrap：
.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
content: none;
}
答案 34 :(得分：0)
使用内联的两个链接。使用下拉切换隐藏链接，并在可见链接上添加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>
答案 35 :(得分：0)
我们看到了，除了＆＃34; My Head Hurts ＆＃34;，＆＃34; Cory Price ＆＃34;发现了两个问题：
问题1：点击下拉菜单链接会打开下拉菜单。除非用户点击某处，否则它将保持打开状态 否则，或者在它上面盘旋，创建一个尴尬的UI。
解决方案：删除＆＃34;类＆＃34;和＆＃34;数据切换＆＃34;导航链接中的元素
解决方案几乎是完美的，但问题是，当涉及到移动设备和平板电脑时，它无法正常工作！
我使用了一些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");
}
});
注意：我们假设移动设备和平板电脑的崩溃数量为768像素。
答案 36 :(得分：0)
我希望这会有所帮助。查看链接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;
}
答案 37 :(得分：0)
<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>
<script>
$('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);
});
</script>
答案 38 :(得分：0)
<!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>
答案 39 :(得分：0)
最标准的答案：
- 支持aria-expanded属性
- 支持非触控设备
- 支持触控设备
- 支持所有下拉菜单
var isTouchDevice =
(('ontouchstart' in window) ||
(navigator.MaxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
// open dropdowns on hover on non mobile devices
$(".dropdown").hover(function() {
$('.dropdown-toggle', this).dropdown("toggle");
});
}
如果您需要，可以将$(".dropdown")更改为特定区域：
$("#top-menu .dropdown")
答案 40 :(得分：0)
为想要在移动设备上使用默认功能的用户添加此功能。可以根据需要设置min-width: ...
@media only screen and (min-width: 1195px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown> ul.dropdown-menu {
display: none;
}
}
设置display: none，以便dropdown-toggle不会产生问题。如果按原样保留，可能会同时打开两个下拉菜单。
答案 41 :(得分：0)
Bootstrap v4解决方案-在IE中工作
这将使您可以跟踪顶级导航链接。
这是一个完整的解决方案，它使用mouseover和mouseleave事件以及一些屏幕宽度检查。
这是在考虑桌面和移动设备的情况下构建的。随意更改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) {
// Open up 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
}
}
答案 42 :(得分：0)
Bootstrap 4，2019
我读了很多这样的答案，但我最终还是自己做，因为那不是我所需要的。
我有Bootstrap 4，并且想要保持点击+悬停功能。此外，我只想在具有额外类“ .open-on-hover”的下拉菜单中启用它。
我还想保留Bootstrap的Jquery来放置下拉菜单，该下拉菜单位于页面边缘旁边。因此，我们不只是要执行“显示：阻止”。我们需要完整的Bootstrap工作方式。所以我只触发点击。
逻辑是“如果是鼠标输入，则将其打开；如果是鼠标离开，则将其隐藏；如果打开则将其隐藏”。
/**
* 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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？