jQuery - функция, связанная с изменением размера, не работает последовательно - PullRequest
Новая
       12

jQuery - функция, связанная с изменением размера, не работает последовательно

2 голосов
/ 03 ноября 2011

У меня есть некоторый код, который действует как переключатель для меню. Я только хочу, чтобы код выполнялся, если ширина окна меньше 768 пикселей, поэтому я обернул его в оператор if, который вычисляет ширину окна. Я привязал эту функцию к событию изменения размера страницы и страница готова. Это работает иногда, но не в других. Измените размер панели результатов несколько раз, и вы поймете, что я имею в виду ...

http://jsfiddle.net/agileapricot/LyUzr/

1 Ответ

4 голосов
/ 03 ноября 2011

Не ключевая проблема, но: jQuery("#nav-btn a.togglemenu") должно быть jQuery("#nav a.togglemenu")

Вы добавили обработчик кликов внутри функции aaMenus, поэтому эта строка: 

jQuery(window).bind("resize", aaMenus);

... запускает функцию и добавляет новый механизм щелчка мышью, при каждом изменении размера окна. Если обработчик щелчков был добавлен четное количество раз, вы 'включается и выключается одновременно, без видимого результата.Даже если он был добавлен нечетное количество раз, вы запускаете переключатель до сотни раз подряд, что приводит к огромной задержке.

Все, что вам нужно сделать, - это удалить обработчик события clickвашей функции: http://jsfiddle.net/mblase75/LyUzr/10/

function aaMenus() {
    if (jQuery(window).width() > 768) { // iPad and Desktop
        /* Dropdown Menu */
        jQuery("ul#menu").addClass("dropdown").removeClass("toggle").show();
        jQuery("a.togglemenu").hide();

        //.. Drop down function will go here later
    } else { // Mobiles
        /* Toggle menu */
        jQuery("ul#menu").addClass("toggle").removeClass("dropdown").hide();
        jQuery("a.togglemenu").show();
    }
}

jQuery(window).bind("resize", aaMenus);

jQuery(document).ready(function() {
    jQuery("#nav a.togglemenu").click(function() {
        jQuery("ul.toggle").toggle();
    });
    aaMenus();
});
...