Bootstrap navbar выпадающее меню не открывается

Bootstrap nav рухнет, как ожидалось, но не отображает падение при нажатии гамбургера. Пример JSFiddle here - используя: bootstrap/3.3.7/css/bootstrap.min.css и bootstrap/3.3.7/js/bootstrap.min.js как мои два внешних ресурса.Bootstrap navbar выпадающее меню не открывается

Я нашел других, указавших, что цель данных кнопки должна соответствовать идентификатору div, который содержит свернутую навигацию. В моем случае, data-target = "# page-nav-tabs" и мой div id = "page-nav-tabs". Но это все еще не работает .... пожалуйста, помогите!

UPDATE: найдено исправление для сложенного меню, которое не открывается, - для включения сценариев jquery. Теперь у меня все еще есть проблема, что выпадающее меню «Создать новый» не работает.

<section id="right-pane-wrapper"> 
    <section id="secondary-nav" class="row"> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#page-nav-tabs" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="page-nav-tabs"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Summary</a></li> 
     <li class="active"><a href="#">Claim Tree</a></li> 
     <li><a href="#">Assignment</a></li> 
     <li><a href="#">Reserve Summary</a></li> 
     <li><a href="#">Related Claims</a></li> 
     <li><a href="#">Indicators</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <button type="button" class="btn btn-default dropdown-toggle">Create New <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
       <li><span><a id="addNotification" href="#"><span>Reminder</span></a></span></li> 
       <li><span><a id="addMessage" href="#"><span>Message</span></a></span></li> 
       <li><span><a href="#"><span>Letter</span></a></span></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

    </section> 
</section>

источник

2016-08-30 BGraphix

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<section id="right-pane-wrapper"> 
    <section id="secondary-nav" class="row"> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#page-nav-tabs" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="page-nav-tabs"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Summary</a></li> 
     <li class="active"><a href="#">Claim Tree</a></li> 
     <li><a href="#">Assignment</a></li> 
     <li><a href="#">Reserve Summary</a></li> 
     <li><a href="#">Related Claims</a></li> 
     <li><a href="#">Indicators</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 

     <li class="dropdown"> 
      <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Create New <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><span><a id="addNotification" href="#"><span>Reminder</span></a></span></li> 
       <li><span><a id="addMessage" href="#"><span>Message</span></a></span></li> 
       <li><span><a href="#"><span>Letter</span></a></span></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

    </section> 
</section> 
</body> 
</html>

Проверить это один его работает в настоящее время

ИЛИ просто заменить кнопку линии с

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Create New <span class="caret"></span></button>

источник

2016-08-30 13:43:57 mean

Bootstrap navbar выпадающее меню не открывается

ответ

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