bootstrap - 導航欄不關閉移動

我在rails和bootstrap上使用ruby來開發我的第一個網站。我的網站中的導航欄是使用引導來實現的。但是，一旦您在mobile上打開它，導航欄就不會關閉。如果您點擊或點擊右上角的「菜單」按鈕，導航欄會打開，但如果再次點擊或在外面點擊該按鈕，導航欄不會關閉並持續閃爍。bootstrap - 導航欄不關閉移動

另一個與移動設備上的相同代碼相關的問題是，下拉菜單根本無法打開。我認爲這與菜單的懸停功能有關，但似乎無法修復它。

這是我的代碼。

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar_id" data-toggle="collapse" data-target=".navbar-collapse"> <!-- START OF NAVIGATION BAR --> 
    <div class="container"><!-- START OF CONTAINER --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <%= link_to image_tag("logo.png", class: "img-responsive"), root_path, class:"name" %> 
     </div> 
      <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav" id="navbar_menus"> 
       <li><%= link_to "Item1", sample_path%></li> 
       <li><%= link_to "Item2", sample_path%></li> 
       <li><%= link_to "Item3", sample_path %></li> 

       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Programs<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><%= link_to "Item1", sample_path%></li> 
        <li><%= link_to "Item2", sample_path%></li> 
        <li><%= link_to "Item3", sample_path%></li> 
       </ul> 
       </li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><%= link_to "Item1", sample_path%></li> 
       </ul> 
       </li> 

       <li><%= link_to "Contact Us", sample_path %></li> 

      </ul> 
    </div><!-- END OF CONTAINER --> 
</nav><!-- END OF NAVIGATION BAR -->

CSS：

#navbar_menus{ 
    padding: 3.6em 0 0 1em; 
} 

@media (min-width: 979px) { 
    ul.nav li.dropdown:hover > ul.dropdown-menu { 
    display: block; 
    } 
}

來源

2015-12-05 user2771150

您是否將bootstrap.js作爲腳本源添加到您的文件中？它也需要jQuery，否則沒有引導「動畫」元素將工作。您可以在[Bootstrap官方文檔]（http://getbootstrap.com/getting-started/）中找到它的解釋 –

我使用CDN鏈接到引導文件。 – user2771150

對不起......恐怕我有點不知所措......什麼是CDN？ –

好像你不關閉在div：

<div class="collapse navbar-collapse">

這可能會導致一些問題。

來源

2015-12-05 14:06:13 Haider

bootstrap - 導航欄不關閉移動

回答

相關問題