Я сделал некоторые изменения в navbar, но теперь кнопка переключения не реагирует на щелчок. Ниже мой код. Где я ошибаюсь?
<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>
Вам нужно изменить эту разметку
<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>
У меня была аналогичная проблема. Просмотрел html несколько раз и был уверен, что это правильно. Затем я начал играть с порядком jquery и javascript.
Первоначально у меня загрузилась загрузка bootstrap.min.js ПЕРЕД jQuery.min.js. В этом состоянии меню не будет расширяться при нажатии на значок меню.
Затем я изменил порядок, чтобы bootstrap.min.js появился после jquery.min.js, и это решило проблему. Я не знаю достаточно о javascript, чтобы объяснить, почему это вызвало проблему (или исправило ее), но это то, что сработало для меня.
Дополнительная информация:
Оба сценария расположены в нижней части страницы, непосредственно перед тегом. Оба сценария размещаются на CDN, а не локально.
Если вы уверены, что ваш код верен, попробуйте.
В <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).
Ну, у меня была та же проблема, что, когда я добавил следующий код в тег моя проблема исправлена:
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
</head>
Надеюсь, это поможет вам, ребята!
Это случилось со мной, я использовал файл jquery.min.js, загруженный с сайта начальной загрузки он не работает, я пробовал одну и ту же страницу с другим файлом jquery.min.js, он работал нормально, поэтому, если вы столкнулись с этой проблемой, попробуйте ссылаться на другой файл jquery.min.js на своей странице и повторите попытку
Только мои 2 цента, были:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
в конце тела, не работал, пришлось добавить crossorigin="anonymous", и теперь он работает, Bootstrap версии 3.3.6....
В моем случае проблема была связана с тем, как я строю свою панель 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.
РЕШИТЬ...
Я добавил jQuery и загрузчик в неправильном порядке в моих заголовочных файлах. Я должен был загрузить JQuery до загрузки.
В случае, если это может помочь кому-то, у меня возникла аналогичная проблема после добавления 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"));