Я ищу способ заставить Twitter Bootstrap Mobile/tablet nav автоматически скрыть/свернуть после нажатия ссылки меню. У меня много элементов меню, поэтому, когда пользователи расширяют меню в iPhone, они видят только меню, а не страницу внизу. Это смущает пользователя, когда они нажимают ссылку меню, что кажется, что ничего не произошло после клика.
Огромное спасибо и обнимите всех, кто может указать мне в правильном направлении!
Если вы используете BS3.x, вы можете свернуть мобильную навигацию с такой разметкой - обратите внимание на "привязку данных" и "цель данных" в разметке для домашней ссылки:
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
</li>
<li>
Вы также можете свернуть мобильный Nav через script следующим образом:
<script>
$('.navbar-collapse a').click(function (e) {
$('.navbar-collapse').collapse('toggle');
});
</script>
Этот подход не требует абсолютно никакой дополнительной разметки. Каждый раз, когда ссылка нажимается на nav, она переключает навигационную панель.
Приветствия.
Навигацию следует закрывать в любое время, когда пользователь щелкает в любом месте тела, а не только элементы навигации. Меню Say открыто, но пользователь нажимает на тело страницы. Пользователь ожидает закрытия меню.
Вы также должны убедиться, что кнопка переключения видна, в противном случае в меню отображается переход.
$(document).ready(function() {
$("body").click(function(event) {
// only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called
if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
$('.navbar-collapse').collapse('toggle');
}
});
});
Самый простой способ, который я нашел, - использовать атрибуты данных на любых навигационных ссылках, где требуется свертывание мобильной навигационной панели. Используйте data-target=".navbar-collapse.in", чтобы навигационная панель переключилась только в открытое состояние, и не каждый раз, когда нажимается ссылка.
<a href="#link" data-toggle="collapse" data-target=".navbar-collapse.in">Link</a>
Пример разметки, например, Документация по загрузке:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">
Добавьте к своему Javascript соответственно:
$('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
$('#example-auto-collapse.in').collapse('hide');
}
Как и Чарли Далссас, рекомендуется было бы также закрыть меню при нажатии на странице. Для этого вы можете заменить Javascript выше следующим:
$('body').click(function(e) {
// don't close when opening a sub-menu in our menu
if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
$('#example-auto-collapse.in').collapse('hide');
}
}
Даже чистая imo будет связывать и отвязывать этот обработчик, когда меню открывается/закрывается и не запускает обработчик напрасно при каждом нажатии на пользователя. Это вряд ли может иметь какое-либо заметное влияние.
Я создал учетную запись стека, чтобы ускорить ответ Skelly за его простоту. Затем я узнал, как нельзя пережить без репутации. Затем я узнал, как это решение ломает ScrollSpy. Теперь это решение, которое наилучшим образом подходит для меня без нежелательных побочных эффектов.
В случае, если кто-либо еще заинтересован, я нашел решение в другом месте. Это красиво просто.
Добавьте этот идентификатор в свою разметку:
<nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">
И добавьте это в свой JS:
$('#hideonclick a').click(function (e) {
e.preventDefault();
$(this).tab('show');
if ($('.btn').is(":visible"))
$('.btn').click();
});
Имейте в виду, что подход для добавления атрибутов переключения данных и атрибутов данных к элементу привязки не работает с настроенным scrollspy. BS ScrollSpy больше не может активировать элемент меню.
Если вы используете подменю, вам необходимо изменить код @user2562923 следующим образом:
$('.navbar-collapse a').click(function (e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$('.navbar-collapse').collapse('toggle');
}
});