Подтвердить что ты не робот

Bootstrap 3 кнопка смены навигационной панели не работает

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

CODE: 
  <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>
4b9b3361

ОТВЕТЫ

Ответ 1

Вам нужно изменить эту разметку

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

измените

data-target=".navbar collapse"

to

data-target=".navbar-collapse"

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

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

Демо-версия Js Fiddle

Ответ 2

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

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

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

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

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

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

Ответ 3

В <body> у вас должно быть два тега <script>:

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Только мои 2 цента, были:

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

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

Ответ 7

В моем случае проблема была связана с тем, как я строю свою панель 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 нуждается в атрибуте data-nnn в HTML.

Ответ 8

РЕШИТЬ...

Я добавил jQuery и загрузчик в неправильном порядке в моих заголовочных файлах. Я должен был загрузить JQuery до загрузки.

Ответ 9

В случае, если это может помочь кому-то, у меня возникла аналогичная проблема после добавления 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"));