CSS 如何在悬停而不是单击时制作 Twitter Bootstrap 菜单下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8878033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Twitter Bootstrap menu dropdown on hover rather than click
提问by falter
I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.
我想让我的 Bootstrap 菜单在悬停时自动下拉，而不必单击菜单标题。我还想去掉菜单标题旁边的小箭头。
采纳答案by Andres Ilich
I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:
我基于最新的 (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>回答by My Head Hurts
To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate litag is hovered over. Taking the example from the twitter bootstrap page, the selector would be as follows:
要使菜单在悬停时自动放置，则可以使用基本 CSS 来实现。您需要将选择器设置为隐藏菜单选项，然后将其设置为在适当的li标签悬停时显示为块。以 twitter bootstrap 页面中的示例为例，选择器如下所示：
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
However, if you are using Bootstrap's responsive features, you will not want this functionality on a collapsed navbar (on smaller screens). To avoid this, wrap the code above in a media query:
但是，如果您正在使用 Bootstrap 的响应功能，您将不希望在折叠的导航栏（在较小的屏幕上）上使用此功能。为避免这种情况，请将上面的代码包装在媒体查询中：
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
To hide the arrow (caret) this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3:
要隐藏箭头（插入符号），这可以通过不同的方式完成，具体取决于您使用的是 Twitter Bootstrap 版本 2 及更低版本还是版本 3：
Bootstrap 3
引导程序 3
To remove the caret in version 3 you just need to remove the HTML <b class="caret"></b>from the .dropdown-toggleanchor element:
要删除版本 3 中的插入符号，您只需<b class="caret"></b>从.dropdown-toggle锚元素中删除 HTML ：
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2 & lower
Bootstrap 2 及更低版本
To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the :afterpseudo element works in more detail. To get you started on your way to understanding, to target and remove the arrows in the twitter bootstrap example, you would use the following CSS selector and code:
要删除版本 2 中的插入符号，您需要更深入地了解 CSS，我建议:after更详细地查看伪元素的工作原理。为了让您开始了解、定位和删除 twitter bootstrap 示例中的箭头，您将使用以下 CSS 选择器和代码：
a.menu:after, .dropdown-toggle:after {
content: none;
}
It will work in your favour if you look further into how these work and not just use the answers that I have given you.
如果您进一步研究这些是如何工作的，而不仅仅是使用我给您的答案，它将对您有利。
Thanks to @CocaAkat for pointing out that we were missing the ">" child combinator to prevent sub menus being shown on the parent hover
感谢@CocaAkat 指出我们缺少 ">" 子组合器以防止在父悬停上显示子菜单
回答by Cory Price
In addition to the answer from "My Head Hurts" (which was great):
除了“我的头很痛”的回答（很棒）：
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
There are 2 lingering issues:
有2个挥之不去的问题：
- Clicking on the dropdown link will open the dropdown-menu. And it will stay open unless the user clicks somewhere else, or hovers back over it, creating an awkward UI.
- There is a 1px margin between the dropdown link, and dropdown-menu. This causes the dropdown-menu to become hidden if you move slowly between the dropdown and dropdown-menu.
- 单击下拉链接将打开下拉菜单。除非用户点击其他地方或将鼠标悬停在它上面，否则它将保持打开状态，从而创建一个尴尬的用户界面。
- 下拉链接和下拉菜单之间有 1px 的边距。如果您在下拉菜单和下拉菜单之间缓慢移动，这会导致下拉菜单隐藏。
The solution to (1) is removing the "class" and "data-toggle" elements from the nav link
(1) 的解决方案是从导航链接中删除“class”和“data-toggle”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
This also gives you the ability to create a link to your parent page - which wasn't possible with the default implementation. You can just replace the "#" with whatever page you want to send the user.
这也使您能够创建指向父页面的链接 - 这在默认实现中是不可能的。您可以将“#”替换为您想要发送给用户的任何页面。
The solution to (2) is removing the margin-top on the .dropdown-menu selector
(2) 的解决方案是删除 .dropdown-menu 选择器上的 margin-top
.navbar .dropdown-menu {
margin-top: 0px;
}
回答by John Montgomery
I've used a bit of jQuery:
我使用了一些 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();
});
回答by stereoscience
There are a lot of really good solutions here. But I thought that I would go ahead and put mine in here as another alternative. It's just a simple jQuery snippet that does it the way bootstrap would if it supported hover for dropdowns instead of just click. I've only tested this with version 3 so I don't know if it would work with version 2. Save it as a snippet in your editor and have it at the stroke of a key.
这里有很多非常好的解决方案。但我认为我会继续将我的放在这里作为另一种选择。这只是一个简单的 jQuery 代码片段，如果它支持下拉菜单的悬停而不是单击，那么它的工作方式就像引导程序一样。我只在版本 3 中测试过这个，所以我不知道它是否适用于版本 2。将它保存为编辑器中的片段，然后按一下键即可。
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
Basically, It's just saying when you hover on the dropdown class, it will add the open class to it. Then it just works. When you stop hovering on either the parent li with the dropdown class or the child ul/li's, it removes the open class. Obviously, this is only one of many solutions, and you can add to it to make it work on only specific instances of .dropdown. Or add a transition to either parent or child.
基本上，它只是说当您将鼠标悬停在下拉类上时，它会向其中添加开放类。然后它就起作用了。当您停止将鼠标悬停在带有下拉类的父 li 或子 ul/li 上时，它会删除打开的类。显然，这只是众多解决方案中的一种，您可以添加到其中以使其仅适用于 .dropdown 的特定实例。或者为父级或子级添加过渡。
回答by Ranjith
Simply customize your CSS style in three lines of code
只需三行代码即可自定义您的 CSS 样式
.dropdown:hover .dropdown-menu {
display: block;
}
回答by Amr
If you have an element with a dropdownclass like this (for example):
如果您有一个具有这样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>
Then you can have the dropdown menu to be automatically drop down on hover over, rather than having to click its title, by using this snippet of jQuery code:
然后，您可以使用以下 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>
This answer relied on @Michael answer, I have made some changes and added some additions to get the dropdown menu work properly
这个答案依赖于@Michael 的答案，我做了一些更改并添加了一些内容以使下拉菜单正常工作
回答by CWSpear
[Update]The plugin is on GitHuband I am working on some improvements (like use only with data-attributes (no JS necessary). I've leaving the code in below, but it's not the same as what's on GitHub.
[更新]该插件在GitHub 上，我正在做一些改进（例如仅与数据属性一起使用（不需要 JS）。我将代码留在下面，但它与 GitHub 上的不同。
I liked the purely CSS version, but it's nice to have a delay before it closes, as it's usually a better user experience (i.e. not punished for a mouse slip that goes 1 px outside the dropdown, etc), and as mentioned in the comments, there's that 1px of margin you have to deal with or sometimes the nav closes unexpectedly when you're moving to the dropdown from the original button, etc.
我喜欢纯 CSS 版本，但在它关闭之前有一个延迟很好，因为它通常是一个更好的用户体验（即不会因为鼠标滑动超出下拉列表 1 px 等而受到惩罚），并且如评论中所述，您必须处理 1px 的边距，或者当您从原始按钮移动到下拉菜单时，有时导航会意外关闭，等等。
I created a quick little plugin that I've used on a couple sites and it's worked nicely. Each nav item is independently handled, so they have their own delay timers, etc.
我创建了一个快速的小插件，我已经在几个网站上使用过，而且效果很好。每个导航项都是独立处理的，因此它们有自己的延迟计时器等。
JS
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);
});
});
};
The delayparameter is pretty self explanatory, and the instantlyCloseOtherswill instantly close all other dropdowns that are open when you hover over a new one.
该delay参数是不言自明的，instantlyCloseOthers当您将鼠标悬停在新下拉菜单上时，它将立即关闭所有其他打开的下拉菜单。
Not pure CSS, but hopefully will help someone else at this late hour (i.e. this is an old thread).
不是纯 CSS，但希望能在这么晚的时候帮助其他人（即这是一个旧线程）。
If you want, you can see the different processes I went through (in a discussion on the #concrete5IRC) to get it to work via the different steps in this gist: https://gist.github.com/3876924
如果你愿意，你可以看到我经历的不同过程（在#concrete5IRC的讨论中）通过这个要点中的不同步骤让它工作：https: //gist.github.com/3876924
The plugin pattern approach is much cleaner to support individual timers, etc.
插件模式方法更清晰地支持单个计时器等。
See the blog postfor more.
回答by Amay Kulkarni
This worked for me:
这对我有用：
.dropdown:hover .dropdown-menu {
display: block;
}
回答by BSUK
This is built into Bootstrap 3. Just add this to your CSS:
这是 Bootstrap 3 内置的。只需将其添加到您的 CSS 中：
.dropdown:hover .dropdown-menu {
display: block;
}
