Переключатель слайдов Jquery при готовности документа и изменении размера браузера

У меня есть следующий код, который отлично работает, кроме случаев, когда я изменяю размер браузера. Код в основном проверяет размер браузера при готовности документа и при изменении размера браузера, чтобы определить, должно ли отображаться меню. Однако при изменении размера меню несколько раз скользит вверх и вниз при нажатии. Я предполагаю, что он регистрируется как изменение размера несколько раз и, следовательно, несколько раз активирует слайдер. См. пример проблемы: http://jsfiddle.net/8mLvp/2/

function doMenu() {

    $('.menu').slideToggle();

    if ($('.menu2').is(":visible")) {
        $('.menu2').hide();
    } else {
        $('.menu2').show();
    }
    return false;
   }

}
$(document).ready(doMenu);
$(window).resize(doMenu);

jquery window-resize slidetoggle
person LeeTee    schedule 02.04.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

$('.icon-menu-2').click(function () {      
    var width = $(window).width();

    if (width < 530) {
        $('.menu').slideToggle();

        if ($('.menu2').is(":visible")) {
            $('.menu2').hide();
        } else {
            $('.menu2').show();
        }
        return false;
    }
});
person ohcibi    schedule 02.04.2013
comment
Это не работает, это то же самое, что и проблема. Если вы измените размер всегда ниже 530, проблема останется. - person Daniel Soublett; 02.12.2016

arrow_upward
1
arrow_downward

Существуют различные способы достижения этого, но использование тайм-аута является самым простым. Это проверит, закончил ли пользователь изменение размера

function doMenu() {
 //your stuff to happen here
}

var TO = false;
$(window).resize(function(){
 if(TO !== false)
    clearTimeout(TO);
 TO = setTimeout(doMenu, 200); //200 milisecond check
});

см. мой пример здесь http://jsfiddle.net/8mLvp/

person Wayneio    schedule 02.04.2013
comment
Я предполагаю, что я должен заменить «resizeStuff» на «doMenu»? Кажется, он не активирует мою функцию ни с - person LeeTee; 02.04.2013
comment
Вам нужно использовать функцию slideToggle, чтобы увидеть мою проблему: jsfiddle.net/8mLvp/2 - person LeeTee; 02.04.2013
comment
именно то, что я искал. спасибо @Wayneio - person dragonvsphoenix; 27.01.2015
comment
Это решение сработало для меня, ответ, помеченный как принятый, не имеет смысла, если вы изменяете размер до 530 пикселей, тогда проблема все еще будет существовать. Кстати, есть ли другой способ сейчас 2016??? - person Daniel Soublett; 02.12.2016