Привет, я пытаюсь сделать отзывчивую версию своего веб-сайта, и у меня возникли проблемы с навигацией, ниже работает код... вроде. Я хочу, чтобы, когда документ меньше 600 пикселей, он будет запускать код jquery, теперь, если я перейду на страницу, когда его более чем на 600 пикселей будет работать так, как планировалось, тогда я изменяю размер окна так, чтобы оно меньше 600 пикселей, а код срабатывает, затем я нажимаю на кнопку навигации, которая появляется, и "слайд-переключатель" продолжает стрелять, поэтому nav перемещается вверх вниз вниз несколько раз, прежде чем оставаться закрытым. ОДНАКО, если размер экрана меньше 600 пикселей для начала, он отлично работает, а затем, когда он расширился до более чем 600 пикселей, jquery все еще там, поэтому, когда я нажимаю кнопку, код срабатывает, и снова он скользит вверх и вниз снова и снова, У кого-нибудь есть идеи: S-код основан на этом учебнике ЗДЕСЬ Спасибо за помощь.
jQuery(document).ready(function ($){
$(window).on('resize', function () {
var windowsize = $(window).width();
if (windowsize < 600) {
$("#mmenu").hide();
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
$("#mmenu li").click(function(){
$("#mmenu").slideUp(500);
});
});
}
}).trigger('resize');
});
Редактирование: я исправил проблему переключения, проблема была slideToggle, мне просто пришлось изменить это на slideDown, не чувствую себя идиотом вообще, не замечая этого, однако он все еще срабатывает, когда я делаю экран больше, я попробовал другое выражение для > 600, но это ничего не дало.
Быстрое обновление событий с использованием JQuery. Каждый раз, когда вы вызываете .click
в переменной JQuery, вы фактически привязываете обработчик событий к этому элементу DOM. Так, например, этот код:
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
$("#mmenu li").click(function(){
$("#mmenu").slideUp(500);
});
});
Этот код привязывает обработчик #mmenu li
элементу #mmenu li
каждый раз, когда вы нажимаете элемент .mtoggle
. Таким #menu li
событие #menu li
click будет происходить несколько раз.
Чтобы решить проблему с изменением размера, похоже, что вы ищете метод .unbind
(http://api.jquery.com/unbind/). Если вы хотите сделать так, чтобы в элементе .mtoggle
не было обработчика .mtoggle
при изменении размера более чем на 600 пикселей, вам придется вызвать этот метод:
$(".mtoggle").unbind('click');
Который отделяет все обработчики событий click
от элемента.