Как скрыть navbar-collapse при клике на пункте меню в мобильной версии?

Question

[Jack OXO]

Учюсь. Вот сайт. В мобильной версии при клике на пункт меню оно не сворачивается. Вопрос из-за чего? Спасибо!

Comments

[Damir Aushenov]

у меня свернулось)

[Jack OXO]

не может быть ) браузер?

Answer 1

[Ivan Demidov]

jsfiddle.net/s9ktyqau/1

Comments

[Ivan Demidov]

Cyber Katze Не входило в условие задачи.

[Ivan Demidov]

Cyber Katze jsfiddle.net/s9ktyqau/2

[Jack OXO]

Ivan Demidov: Что-то не работает (закинул в начало index.html)

[Ivan Demidov]

В моем примере работает, в вашем случае возможно проблема в custom1.js 25-35 строка (не факт что еще где-то зарыто...)

$('a[href*=#section]').click(function() {
         if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
                 var $target = $(this.hash);
                 $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
                 if ($target.length) {
                     var targetOffset = $target.offset().top;
                     $('html,body').animate({scrollTop: targetOffset}, 1000);
                     return false;
                }
           }
       });

переписать на

$('a[href*=#section]').click(function(event) {
         event.preventDefault();
         if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
                 var $target = $(this.hash);
                 $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
                 if ($target.length) {
                     var targetOffset = $target.offset().top;
                     $('html,body').animate({scrollTop: targetOffset}, 1000);
                }
           }
       });

[Jack OXO]

попробовал, не помогло. А есть ли вариант как-нибудь "очистить" скрипты, применяемые к navbar-collapse и вставить Ваш, чтобы не было не с чем конфликтов? А то просто это генератор кода насоздавал кучу ....

[Ivan Demidov]

По пунктам:
1.Делаем замену того что я написал выше
2.Скрипты которые у вас сейчас находятся в head

$(window).on('click', '.propClone a', function() {
			$(this).parents('.navbar-collapse').addClass('collapse')
		}); 
		$('.navbar-collapse').on('click', 'a', function (e) {
	    	$(e.delegateTarget).collapse('toggle');
		});

меняем на

$(function(){
$('.navbar-collapse').on('click', 'a', function (e) {
    $(e.delegateTarget).collapse('toggle');
});
});

[Jack OXO]

Спасибо, но не помогает :(

[Ivan Demidov]

3.Переместите пунк 2 в конец body

[ilya_k]

Добрый день! спасибо за ваш код, почему-то не удавалось его написать самостоятельно.

Прошу подсказать как скорректировать работу первой версии вашего скрипта (jsfiddle.net/s9ktyqau/1 ) , чтобы убрать следующий эффект:

При полной версии меню, происходит так же процедура сворачивания меню и все кнопки мигают,
как распространить действие вашего скрипта только на состояние меню в сжатой версии?

заранее спасибо!

[Ivan Demidov]

ilya_k jsfiddle.net/s9ktyqau/3

[ilya_k]

Ivan Demidov: Благодарю за наводку, вы мне очень помогли, не подумал что-то про такой вариант.
дополнил свой вариант:

function menu_close(){
$('.navbar-collapse').on('click', 'a', function (e) {
if ($(window).width() <= 768){
$(e.delegateTarget).collapse('toggle');
}
});
}

Спасибо большое!

[ilya_k]

Ivan Demidov, появился еще один вопрос, как регулировать на каком именно разрешении меню перестает быть набором кнопок в горизонтальную линию и появляется кнопка сэндвич ?
никак не могу найти этот регулятор, буду очень благодарен подсказке.

Answer 2

[Pavel Torbeev]

$(window).on('click', '.propClone a', function() {
$(this).parents('.navbar-collapse').addClass('collapse')
});

Comments

[Jack OXO]

не работает, я прямо в index.html в начало закинул :(