bootstrap 3 кнопка навигации на панели навигации не работает

Я сделал некоторую модификацию в navbar, но теперь кнопка переключения не реагирует на щелчок. Ниже мой код. Где я ошибаюсь? bootstrap 3 кнопка навигации на панели навигации не работает

КОД:

<body> 
    <div class="navbar-wrapper"> 
     <div class="container"> 

     <div class="navbar navbar-default navbar-static-top" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="./index.html">ossoc</a> 
      </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
       <button id="loginbutton" type="button" class="btn btn-primary narbar-btn"><i class="glyphicon glyphicon-log-in"></i>Login</button> 
       <button type="button" class="btn btn-success navbar-btn"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button> 
       </ul> 
      </div> 
      </div> 
     </div> 

     </div> 
    </div>

источник

2013-12-21 user3108790

@ Randy Greencorn: спасибо, что это работает для меня! http://stackoverflow.com/a/26442510/3266248 – mihatel

Вы должны изменить в этой разметке

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse">

Изменение

data-target=".navbar collapse"

data-target=".navbar-collapse"

Причины: Значение data-target этого имя любого класса, связанные навигационных дел. В этом случае

<div class="collapse navbar-collapse"> <-- Look at here 
    <ul class="nav navbar-nav navbar-right"> 
    ..... 
</div>

Js Fiddle Demo

источник

2013-12-21 13:50:12 Sachin

Thanx приятель. Глупая ошибка. Я просмотрел код, который просто не мог увидеть пропавший - – user3108790

У меня была аналогичная проблема. Просмотрел html несколько раз и был уверен, что это правильно. Затем я начал играть с порядком jquery и javascript.

Первоначально у меня была загрузка bootstrap.min.js ПЕРЕД jQuery.min.js. В этом состоянии меню не будет расширяться при нажатии на значок меню.

Затем я изменил порядок, чтобы bootstrap.min.js появился после jquery.min.js, и это решило проблему. Я не знаю достаточно о javascript, чтобы объяснить, почему это вызвало проблему (или исправило ее), но это то, что сработало для меня.

Дополнительная информация:

Оба сценария расположены в нижней части страницы, непосредственно перед тегом. Оба сценария размещаются на CDN, а не локально.

Если вы уверены, что ваш код верен, попробуйте это.

источник

2014-10-18 17:22:27

Это была моя проблема, когда у меня были оба сценария, загружающиеся в нижней части тела. –

Это сработало для меня, поскольку я тоже использовал CDNs –

Спасибо, ваш ответ мне очень помог. –

В <body> вы должны иметь два <script> тегов:

<script src="https://code.jquery.com/jquery-2.1.3.js"></script> 
<script src="js/bootstrap.js"></script>

Первый будет загружать JQuery из CDN, а второй один будет загружать Javascript Bootstrap из локального каталога (в данном случае это директория js).

источник

2015-03-21 12:35:10 Farhad

Это, кажется, не отвечает на вопрос, и детали должны находиться в связанном ресурсе. – mins

Ваш ответ не очень ясен, не уверен, как он даже отвечает на вопрос. Пожалуйста, отформатируйте его правильно, объясните свои шаги по решению проблемы OP. – nicael

Добавление скрипта jquery работало для меня. спасибо – bitguider

Это случилось со мной, я использовал файл jquery.min.js, загружаемый с сайта начальной загрузки , он не работает, я пробовал ту же страницу с другим файлом jquery.min.js, что он работал нормально, поэтому, если вы столкнулись с этой проблемой, попробуйте ссылаться на другие jquery.min.js файл на странице и попробуйте еще раз

источник

2016-01-04 19:46:28

Просто мои 2 цента, были:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

в конце тела, не работал, пришлось добавить crossorigin="anonymous" и теперь он работает, Bootstrap версии 3.3.6. ...

источник

2016-03-13 14:11:18 krsnik93

-2

В случае, если это может помочь кому-то, у меня была аналогичная проблема после добавления Bootstrap 3 в мой проект MVC 4. Оказалось, что я имел в виду bootstrap-min.js вместо bootstrap.js в моем BundleConfig.cs.

Не работает:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
          "~/Scripts/bootstrap-min.js"));

Работал:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
         "~/Scripts/bootstrap.js"));

источник

2016-06-01 06:56:45 punatiainen

В моем случае проблема была из-за того, как я строю свой бар Nav. Я делал это через плагин jQuery, поэтому я могу быстро создать компоненты Bootstrap через javascript.

Чтобы вырезать длинную историю, короткую привязку элементов данных кнопки через jQuery .data() привела к тому, что кнопка свернуть не работала, выполнив ее с помощью .attr(), исправил проблему.

Это не работает:

$this.addClass("navbar navbar-default") 
    .append($("<div />").addClass("container-fluid") 
    .append($("<div />").addClass("navbar-header") 
     .append($("<button />").addClass("navbar-toggle collapsed") 
     .attr("type","button") 
     .attr("aria-expanded", "false") 
     .data("target","#" + id) 
     .data("toggle","collapse") 
     .html("<span class='sr-only'>Toggle navigation</span>" 
      + "<span class='icon-bar'></span>" 
      + "<span class='icon-bar'></span>" 
      + "<span class='icon-bar'></span>")) 
     .append($("<a href='#' />").addClass("navbar-brand") 
      .append(document.createTextNode(settings.label)))) 
    .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

Но это делает (с изменениями, оставленные в комментариях):

$this.addClass("navbar navbar-default") 
    .append($("<div />").addClass("container-fluid") 
    .append($("<div />").addClass("navbar-header") 
     .append($("<button />").addClass("navbar-toggle collapsed") 
     .attr("type","button") 
     .attr("aria-expanded", "false") 
     .attr("data-target", "#" + id) //.data("target","#" + id) 
     .attr("data-toggle", "collapse") // .data("toggle","collapse") 
     .html("<span class='sr-only'>Toggle navigation</span>" 
      + "<span class='icon-bar'></span>" 
      + "<span class='icon-bar'></span>" 
      + "<span class='icon-bar'></span>")) 
     .append($("<a href='#' />").addClass("navbar-brand") 
      .append(document.createTextNode(settings.label)))) 
    .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

Я могу только предположить, что это связано с тем, как JQuery связывает. data(), он не записывает атрибуты в элементы, а просто привязывает их к объекту jQuery. Использование .data() версия в результате HTML:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" >

Где как .attr() версия дает:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#6a2034fe-8922-4edd-920e-6bd0ea0b2caf">

Кажется, что Bootstrap необходим атрибут данных-NNN в HTML.

источник

2016-09-12 10:36:17 Morvael

Ну я была такая же проблема, что когда я добавил следующий код в теге моя проблема фиксированной:

<head> 
     <meta name="viewport" content="width=device-width , initial-scale=1" /> 
    </head>

Я надеюсь, что это может помочь вам, ребята!

источник

2017-06-25 17:10:52

bootstrap 3 кнопка навигации на панели навигации не работает

ответ

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