В разделе "ПРОДУКТЫ" нажмите "Я", чтобы открыть белый div (как показано в приложении). Когда вы реагируете (мобильный и планшетный), я хотел бы автоматически закрыть реагирующий навигатор и отображать только белую полосу.
Я пробовал:
$('.btn-navbar').click();
также попытался:
$('.nav-collapse').toggle();
И это действительно работает. Однако на рабочем столе он также называется и делает что-то напуганное в меню, где он сжимается на секунду.
Любые идеи?
У меня есть возможность работать с анимацией!
Меню в html:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Связать событие клика по всем элементам навигации в меню сворачивания (плагин Bootstrap collapse):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
ИЗМЕНИТЬ Чтобы сделать его более общим, мы можем использовать следующий фрагмент кода
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
Вам не нужно добавлять какие-либо дополнительные javascript к тому, что уже включено в параметр свертывания бутстрапов. Вместо этого просто включите переключатели данных и селекторов данных в элементы списка меню так же, как и с кнопкой навигации по навигатору. Итак, для пункта меню "Продукты" это будет выглядеть как
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Затем вам нужно будет повторить селектор данных и переключателей данных для каждого пункта меню
ИЗМЕНИТЬ!!! Чтобы исправить проблемы с переполнением и мерцание этого исправления, я добавляю еще один код, который исправит это и все еще не будет иметь никакого дополнительного javascript. Вот новый код:
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Здесь он работает http://jsfiddle.net/jaketaylor/84mqazgq/
Это приведет к тому, что ваши переключатели переключения и целевых селекторов будут соответствовать размеру экрана и устраните глюки в большом меню. Если у кого-то есть проблемы с глюками, пожалуйста, дайте мне знать, и я найду исправление. Благодаря
Я думаю, что вы все инжиниринг.
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
РЕДАКТИРОВАТЬ. Чтобы позаботиться о подменю, убедитесь, что в их переключателе привязки есть класс выпадающего списка.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
РЕДАКТИРОВАТЬ 2: добавить поддержку касания телефона.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
Мне очень понравилась идея Джейка Тейлора сделать это без дополнительного JavaScript и воспользовалась переключением коллапса Bootstrap. Я обнаружил, что вы можете исправить проблему "мерцания", если меню не находится в сложенном режиме, слегка изменив селектор data-target, включив класс in. Итак, это выглядит так:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
Я не тестировал его с вложенными выпадающими меню/меню, поэтому YMMV.
только для того, чтобы быть полным, в Bootstrap 4.0.0-бета, используя .show, работал у меня...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
Это работает, но не оживляет.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
Я предполагаю, что у вас есть такая строка, которая определяет навигационную область на основе примеров Bootstrap и всех
<div class="nav-collapse collapse" >
Просто добавьте свойства как таковые, например, на кнопку MENU
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
Я также добавил в <body>, работал. Не могу сказать, что я профилировал его или что-то в этом роде, но, похоже, мне нравится... пока вы не нажмете на случайное пятно пользовательского интерфейса, чтобы открыть меню, так что это не так хорошо.
ДК
В HTML я добавил класс nav-link к тегу a каждой навигационной ссылки.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
это решение прекрасно работает на настольных и мобильных устройствах.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Просто чтобы описать решение user1040259, добавьте этот код в свой $(документ).ready(function() {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
Как они упоминают, это не оживляет ход... но он закрывает панель навигации при выборе позиции
Для тех, кто использует AngularJS и Angular UI Router с этим, вот мое решение (с помощью mollwe toggle). Где ".navbar-main-collapse" - моя "цель данных".
Создать директиву:
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
return {
restrict: 'C',
link: function (scope, element) {
//watch for state/route change (Angular UI Router specific)
$rootScope.$on('$stateChangeSuccess', function () {
if (!element.hasClass('collapse')) {
element.collapse('hide');
}
});
}
};
}]);
Директива по использованию:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
Я использую функцию mollwe, хотя я добавил 2 улучшения:
a) Избегайте закрытия выпадающего списка, если щелкнула ссылка (включая другие ссылки)
b) Скройте выпадающий список, если вы нажимаете на видимый веб-контент.
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
Не самый новый поток, но я искал решение для одной и той же проблемы и нашел один (сочетание некоторых других).
Я дал NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
id/Идентификатор типа:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Не самая лучшая "Идея" - но: работает для меня! Теперь вы можете проверить видимость вашей кнопки (с помощью jquery), например:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(ПРИМЕЧАНИЕ: Это всего лишь код, который был отключен! Я использовал событие onclick в моих ссылках на Nav!. (Запуск AJAX Reguest.)
Результат: если кнопка "видимая", она "нажата"... Итак: Нет ошибки, если вы используете "Полноэкранный просмотр" Bootstrap (ширина более 940 пикселей).
Привет Ральф
PS: Он отлично работает с IE9, IE10 и Firefox 25. Не проверял других - Но я не вижу проблемы: -)
Это должно сделать трюк.
Требуется bootstrap.js.
Пример = > http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
Это делает то же самое, что и добавление атрибутов data-toggle = "collapse" и "href=" yournavigationID "" в теги меню навигации.
Это сработало для меня. Я сделал это, когда я нажимаю кнопку меню, добавляя или удаляя класс 'in', потому что добавив или удалив этот класс, переключатель работает по умолчанию. 'e.stopPropagation()' означает остановить анимацию по умолчанию с помощью bootstrap (я думаю), вы также можете использовать "toggleClass" вместо добавления или удаления класса.
$('# ChangeToggle'). on ('click', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Вы используете
ul.nav {
display: none;
}
Это по умолчанию закроет навигационную панель. Пожалуйста, дайте мне знать, кто-нибудь находит это полезным
Если, например, ваш значок для переключения отображается только для дополнительных небольших устройств, вы можете сделать что-то вроде этого:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
Щелчок [data-toggle = "offcanvas" ] добавит bootstrap.hidden-xs в мое # боковое меню, которое скроет содержимое бокового меню, но снова станет видимым, если вы увеличите размер окна.
если меню html
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
навигация переключается в класс добавляется и удаляется из переключателя. проверьте, открыто ли настроенное меню, затем выполните закрытие.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close, ответ, совместимый с браузером IE, без каких-либо ошибок консоли. Если вы используете загрузчик, используйте этот
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
Решение Bootstrap 4 без Javascript
Добавьте атрибуты data-toggle="collapse" data-target="#navbarSupportedContent" в div <div class="collapse navbar-collapse">
Убедитесь, что вы указали правильный id в data-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>$('.navbar-toggle').trigger('click');