JQuery изменить размер застрял в цикле?

Question

JQuery изменить размер застрял в цикле?

0

Привет, я пытаюсь сделать отзывчивую версию своего веб-сайта, и у меня возникли проблемы с навигацией, ниже работает код... вроде. Я хочу, чтобы, когда документ меньше 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, но это ничего не дало.

jphillip724 19 окт. 2013, в 19:02

Источник

Теги:

jquery

html

resize

1 ответ

Ещё вопросы

Dan-Nolan · Accepted Answer · 2013-10-19T15-34-00.000Z

Быстрое обновление событий с использованием 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 от элемента.

Спасибо, не то, чтобы jQuery думал, что мне нужно немного освежиться.
@ jphillip724 Нет проблем. Когда дело доходит до этого, JQuery просто облегчает вам регистрировать события JavaScript, поэтому я бы изучил основы событий JavaScript, прежде чем перейти прямо к JQuery. Удачи!