twitter-bootstrap nav not toggling collapse

Question

Вот моя разметка для моего навигатора с использованием bootstrap .... Я не уверен, почему div с классом «mynavbar» не переключается открывать и закрывать (добавив «в 'class to it), когда нажата кнопка с целевым объектом данных' 'mynavbar' '(это только на небольших экранах, где отображается меню типа гамбургера вместо ссылок «работа, о, контакт»)

Кроме того, на больших и малых экранах, если Ли, которые нажимали на есть класс «активный» добавил к ним? Я не вижу это происходит либо

<nav class='navbar navbar-fixed-top drop-shadow'> 
     <div class='container-fluid'> 
      <div class='navbar-header page-scroll'> 
       <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.mynavbar'> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
       </button> 
       <a class='navbar-brand page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a> 
      </div> 
      <div class='collapse navbar-collapse mynavbar'> 
       <ul class='nav navbar-nav'> 
        <li><a class='page-scroll' href='#work'>Work</a></li> 
        <li><a class='page-scroll' href='#about'>About</a></li>     
        <li><a class='page-scroll' href='#contact'>Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

Answer 1

Вы должны предназначаться для ID в <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">, а не класс. Затем измените элемент, который имеет collapse navbar-collapse класс для <div class="collapse navbar-collapse" id="mynavbar">

В целом, этот код должен работать для вас

<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand page-scroll" href="#"> 
       <i class="glyphicon glyphicon-home"></i> 
      </a> 
     </div> 
     <div class="collapse navbar-collapse" id="mynavbar"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a class="page-scroll" href="#work">Work</a></li> 
       <li><a class="page-scroll" href="#about">About</a></li> 
       <li><a class="page-scroll" href="#contact">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

И, вы можете добавить class="active" к вашему <li> при нажатии, это часто обрабатывается в стороне сервера или в вашем собственном URL-маршрутизаторе