我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
最标准的回答:
支持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(e) {
$('.dropdown-toggle', this).dropdown("toggle");
e.stopPropagation();
});
// prevent blinkling
$(".submenu-link").click(function(e) {
e.stopPropagation();
});
}
如果你需要，你可以将$(".dropdown")更改为特定的区域:
$("#top-menu .dropdown")
其他回答
为了让菜单在悬停时自动下落，这可以使用基本的CSS实现。您需要计算出隐藏菜单选项的选择器，然后将其设置为在适当的li标记悬停时显示为块。以twitter引导页面为例，选择器如下所示:
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，以不同的方式完成:
引导3
要在版本3中删除插入符号，你只需要从.dropdown-toggle锚定元素中删除HTML <b class="插入符号"></b>:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2 &更低
要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议更详细地了解:after伪元素是如何工作的。为了让你开始理解，在推特引导例子中瞄准并删除箭头，你将使用以下CSS选择器和代码:
a.menu:after, .dropdown-toggle:after {
content: none;
}
如果你深入研究这些方法，而不是仅仅使用我给你的答案，这会对你有利。
感谢@CocaAkat指出，我们错过了“>”子组合子，以防止子菜单显示在父悬停
<!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>
除了来自“我的头很疼”的答案(这很棒):
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
有两个挥之不去的问题:
单击下拉链接将打开下拉菜单。而且它会一直打开，除非用户点击其他地方，或者将鼠标悬停在它上面，创建一个尴尬的UI。 下拉链接和下拉菜单之间有1px的空白。如果您在下拉菜单和下拉菜单之间缓慢移动，这将导致下拉菜单变得隐藏。
(1)的解决方案是从nav链接中删除“class”和“data-toggle”元素
<a href="#">
Dropdown
<b class="caret"></b>
</a>
这还使您能够创建到父页面的链接——这在默认实现中是不可能的。您只需将“#”替换为您想要发送给用户的任何页面。
(2)的解决方案是删除.下拉菜单选择器上的margin-top
.navbar .dropdown-menu {
margin-top: 0px;
}
只是想补充一下，如果你有多个下拉列表(就像我一样)，你应该这样写:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
它会正常工作的。
我是这样做的:
$('ul.nav li.dropdown').hover(function(){
$(this).children('ul.dropdown-menu').slideDown();
}, function(){
$(this).children('ul.dropdown-menu').slideUp();
});
我希望这能帮助到一些人……
