脚本来切换悬停下拉菜单不工作新的下拉菜单

我有一个脚本，当用户将鼠标悬停在菜单项上，如果导航栏未折叠，切换下拉菜单。我试图将.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'); 
    } 
});

来源

2015-05-28 galindbergh

您需要正确构建下拉菜单。

（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>

来源

2015-05-28 18:04:39

现在我想改变导航栏崩溃使用脚本创建断点。 – galindbergh

-1

您应该创建两个不同的.navbar品牌元素，并使用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>

来源

2015-05-28 17:24:28

脚本来切换悬停下拉菜单不工作新的下拉菜单

回答

相关问题