我想有我的引导菜单自动下拉悬停,而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
最好的方法是用鼠标悬停来触发Bootstrap的点击事件。这样,它应该仍然保持触摸设备友好。
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
其他回答
为了让菜单在悬停时自动下落,这可以使用基本的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指出,我们错过了“>”子组合子,以防止子菜单显示在父悬停
使用以下代码在鼠标悬停时打开子菜单(仅适用于桌面):
$('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>
这里是JSFiddle -> 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);
});
用这个脚本覆盖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') })
});
});