我有一个脚本,当用户将鼠标悬停在菜单项上时,如果导航栏未折叠,则会切换下拉菜单。我试图将.navbar-brand
转换为下拉菜单,但它在悬停时不会打开。
为什么这不起作用?
这是最后的工作小提琴。 http://jsfiddle.net/galindbergh/jkkvk1v7/13/
这是我为navbar-brand
下拉菜单尝试的HTML,但该功能无法正常运行。
<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 href="#" class="navbar-brand dropdown" style="font-size: 14px;" data-toggle="dropdown">Brand Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
这是在悬停
上切换下拉菜单的脚本$( '.dropdown' ).hover(function() {
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
}, function() {
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
});
答案 0 :(得分:1)
您需要正确构建下拉菜单。
(Demo)
改变这个......
<a href="#" class="navbar-brand dropdown" style="font-size: 14px;" data-toggle="dropdown">Brand Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
对此...
<ul class="nav navbar-nav col-xs-10 col-sm-12">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Brand Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
答案 1 :(得分:-1)
您应该创建两个不同的.navbar-brand元素,并使用bootstrap responsive utilities在两者之间切换。如下所示:
<a href="#" class="navbar-brand dropdown visible-md visible-lg">Brand Dropdown</a>
<a href="#" class="navbar-brand visible-xs visible-sm">Brand Normal</a>