bootstrap - navbar не закрывается на мобильном телефоне

Я использую ruby on rails и bootstrap для разработки своего первого веб-сайта. Панель навигации на моем веб-сайте реализована с помощью бутстрапа. Однако панель навигации не закрывается, как только вы ее открываете на mobile. Если вы нажмете или коснитесь кнопки «меню» в правом верхнем углу, откроется панель навигации, но если вы снова нажмете на кнопку или снаружи, панель навигации не закрывается и продолжает мерцать.bootstrap - navbar не закрывается на мобильном телефоне

Еще одна проблема, связанная с тем же кодом на мобильном телефоне, заключается в том, что выпадающие меню вообще не открываются. Я думаю, что это связано с функциональностью зависания меню, но я не могу ее исправить.

Вот мой код.

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 - navbar не закрывается на мобильном телефоне

ответ

Смежные вопросы