我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
除了来自“我的头很疼”的答案(这很棒):
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 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的答案,我做了一些改变,并添加了一些补充,以使下拉菜单正常工作
使用以下代码在鼠标悬停时打开子菜单(仅适用于桌面):
$('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),子菜单将在移动设备上采用全屏宽度。
<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指出,我们错过了“>”子组合子,以防止子菜单显示在父悬停
我们看到,除了“My Head Hurts”的答案,“Cory Price”还发现了两个问题:
问题1:单击下拉链接将打开下拉菜单。它会一直打开,除非用户点击某个地方 或者返回到它上面,创建一个尴尬的UI。 解决方案:从导航链接中删除“class”和“data-toggle”元素
这个解决方案近乎完美,但这里的问题是,当涉及到移动设备和平板电脑时,它就行不通了!
我使用了一些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");
}
});
注意:这里我们假设移动设备和平板电脑的折痕从768px开始。