Как убрать баг с множественными повторениями при ресайзе окна?

Question

[kit4kat]

Задача - сделать так чтоб нужный блок открывался только на экранах больше 768px (по нажатию на кнопку открыть/закрыть).

Вот как сделал:

Код

var winW = $(window).width() + 17;

if(winW >= 768){
    $('.list-triger').on('click',function(e){
        e.preventDefault();
        $('.sublist').toggle(200);
    });
}
else{
    $('.list-triger').off('click');
}
    
$(window).resize(function(){
    var winW = $(window).width() + 17;
    if(winW >= 768){
        $('.list-triger').on('click',function(e){
            e.preventDefault();
            $('.sublist').toggle(200);
        });
    }
    else{
        $('.list-triger').off('click');
    }
});

Вроде бы все ок, но если ресайзить окно на разрешениях 768 и выше, то при нажатии на кнопку открыть/закрыть этот блок открывается несколько раз, а не один. Вот здесь можно глянуть: adapt.kl.com.ua/test

Comments

[x67]

Судя по коду, это не баг, а фича)

Answer 1

[0xD34F]

У вас при каждом ресайзе >= 768 вешается обработчик клика. Было 600, стало 800 - повесили обработчик, ОК. Затем из 800 сделали 1000 - добавился ещё один обработчик. 1000 -> 900 -> 1000 -> 900 -> 1000 - добавили ещё четыре обработчика. Разумеется, все они вызываются при клике - отсюда и многократное открывание/закрывание.

Как исправить? Решение в лоб: при каждом ресайзе снимать обработчик клика. То есть, делаете .off('click') не в else, а перед if (winW >= 768).

Comments

[kit4kat]

круть, все работает) долбался с этим пару дней. спасибо!