腳本來切換懸停下拉菜單不工作新的下拉菜單

我有一個腳本，當用戶將鼠標懸停在菜單項上，如果導航欄未摺疊，切換下拉菜單。我試圖將.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

腳本來切換懸停下拉菜單不工作新的下拉菜單

回答

相關問題