blackseabreathe
@blackseabreathe
brackets

Что в этом скрипте не так?

Пытаюсь написать ф-ию чтобы если ширина экрана меньше 960, то //выполнять действия, а если больше, то //ничего не делать.

function resizeScrenn(){ // создал ф-ию
if($(window).width() <= 960){ // если ширина меньше 960
$('.menu li').on('click', function(){ //при клике на этот элемент
if($(this).children('.submenu').length > 0){ // если у него есть этот дочерний элемент
$(this).children('.submenu').slideToggle(300); // то показывать его
} else{ // а если нет
return false; // ничего не делать
}
});
} else{ // а если экран больше 960
return false; // тем более ничего не делать вообще
}};
resizeScrenn(); // вызываю ф-ию при загрузке страницы чтобы сразу трекнуть ширину экрана
$(window).resize(function(){ // а теперь если окно рисайзнули (и это очень важно трекать)
resizeScrenn();}); // то снова запускаем эту ф-ию


Проблема в том, что при загрузке страницы все норм работает как и должно (при клике на пункт меню открывает субменю если оно есть), но стоит рисайзнуть экран и при клике на пункт меню, в котором есть субменю, то slideToggle срабатываем овер-дофига раз.

Вопрос: что сделал не так?
Спасибо за помощь.
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
@fear-cry
Frontend Developer
Вы многократно подписываетесь на событие клика $('.menu li').on('click', function(){ при каждом ресайзе, поэтому и колбек вызывается много раз при клике.
Нужно подписку вынести из ф-ции resizeScrenn и проверять на флаг isTablet, а в resizeScrenn только обновлять этот флаг вот так:

/* Ready */
$(function() {
    $('.menu li').on('click', function() {
        if( window.isTablet && $(this).children('.submenu').length ) { // обработка флага isTablet происходит при клике
            $(this).children('.submenu').slideToggle(300);
        }
    });

    function resizeScrenn() {
        window.isTablet = $(window).width() <= 960;
    }
    $(window).resize( resizeScrenn ); // передаем ссылку на функцию
    resizeScrenn(); //вызываем ф-ию при загрузке страницы чтобы сразу трекнуть ширину экрана
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Evanescing
Как вариант, загнать ширину экрана в параметр или переменную, проверять ширину экрана в начале ресайза и в ходе, и не запускать on('click', если в обоих случаях ширина <= 960 . В ходе ресайза обновлять переменную/параметр.

Ещё вариант добавить вспомогательный класс элементу .menu li или .menu, если ширина <= 960, и click вешать на тот класс. Проверять наличие класса, чтобы не вешать множество обработчиков click на один элемент.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы