我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
除了来自“我的头很疼”的答案(这很棒):
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;
}
其他回答
你有这样的代码:
<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毫秒后隐藏菜单。如果你想知道我为什么使用它,是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时,时间会被重置,你可以在那里停留多长时间都行。当您退出菜单时,我们将立即隐藏菜单,没有任何超时。
我已经在许多项目中使用了这段代码,如果您在使用它时遇到任何问题,请随时向我提问。
jQuery的解决方案是好的,但它将需要处理点击事件(移动或平板电脑)悬停将无法正常工作…也许可以做一些窗口重新大小检测?
安德烈斯·伊里奇的回答似乎很有效,但它应该被包装在一个媒体问题中:
@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;
}
}
<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>
为了让菜单在悬停时自动下落,这可以使用基本的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指出,我们错过了“>”子组合子,以防止子菜单显示在父悬停
这里有很多非常好的解决方案。但我想我还是把我的放在这里作为另一种选择。这只是一个简单的jQuery代码片段,如果它支持悬停下拉而不是单击,它就会以引导的方式完成。我只测试了版本3,所以我不知道它是否适用于版本2。将其保存为编辑器中的一个片段,按一下键就可以看到它。
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
基本上,它只是说当你悬停在下拉类上时,它会向它添加开放类。这样就可以了。当您停止在带有下拉类的父类li或子类ul/li上悬停时,它将删除打开类。显然,这只是众多解决方案中的一个,您可以对其进行添加,使其仅适用于.dropdown的特定实例。或者向父级或子级添加转换。