Accordion looping on resize

У меня есть меню, которое скрыто в аккордеоне при просмотре на экранах размером менее 600 пикселей. На экранах размером более 600 пикселей меню видно.Accordion looping on resize

jsfiddle - http://jsfiddle.net/ashatron/zbzqoz2f/

он работает нормально, но когда я изменить размер окна, чтобы быть больше, чем 600px, а затем вернуться к менее 600px затем нажмите вид карты сайта она петли анимации несколько раз.

Я думаю, что он запускает функцию для каждого события изменения размера, которое опрокидывает аккордеон, а затем зацикливает его. Но я не уверен, как лучше всего заказать синтаксис, чтобы заставить его работать.

Любая помощь будет оценена!

footernavmenufn = function() { 

var current_width = $(window).width(); 

if (current_width < 600) { 
    $('.footer-accordion-head').show(); 
    $('.footer-accordion-body').hide(); 

    $('.footer-accordion-head').click(function() { 
    $(".footer-accordion-body").slideToggle('400'); 
    // console.log('hmmm'); 
return false; 
}).next().hide(); 
} else { 
    $('.footer-accordion-head').hide(); 
    $('.footer-accordion-body').show(); 
} 
}; 


$(document).ready(function() { 
footernavmenufn(); 
}); 

$(window).resize(function(){ 
footernavmenufn(); 
//console.log('OMG-WHY-YOU-NO-WORK'); 
});

источник

2014-09-02 Ash

Каждый вызов '.click()' добавляет другой привязки. И ни один из них ни в какой момент не может быть несвязан. Таким образом, продолжая изменять размер окна, находясь под разрешением менее 600 пикселей, вы можете включить в себя 100 обработчиков, каждый из которых подготовлен для очереди еще один 'slideToggle()'. –

Проблема заключается в том, что при каждом изменении окна и выполнении условия вы привязываете новый обработчик события click, поэтому через некоторое время будут выполняться несколько обработчиков событий, вызывающих хаос. В идеале ваш код должен быть что-то вроде

$(document).ready(function() { 
    $('.footer-accordion-head').click(function() { 
    $(".footer-accordion-body").slideToggle('400'); 
    console.log('hmmm'); 
    return false; 
    }); 
    $(window).resize(footernavmenufn); 
    footernavmenufn(); // or $(window).trigger("resize"); 
}); 

footernavmenufn = function() { 

    var current_width = $(window).width(); 

    if (current_width < 600) { 
    $('.footer-accordion-head').show(); 
    $('.footer-accordion-body').hide(); 
    } else { 
    $('.footer-accordion-head').hide(); 
    $('.footer-accordion-body').show(); 
    } 
};

Updated Fiddle

источник

2014-09-02 15:48:39

блестящий! это работает! Большое спасибо! Итак, вы сделали выделение запроса переключения слайдов щелчка и ширины. Так что переключение слайдов на клик только в документе готов, но запрос ширины зависит от размера, поэтому он не запускает слайд-переключатель при каждом событии изменения размера ... Я думаю, что получаю, как это работает, спасибо чувак! : D есть большая разница между $ (окно) .resize (функция() { – Ash

есть большая разница между $ (окно) .resize (функция() { footernavmenufn();} ); и $ (окно) .resize (footernavmenufn); footernavmenufn(); не уверен в чем разница:/ – Ash

Ну в первом случае вы вручную вызываете функцию внутри анонимной функции ... во втором в случае, если функция, которую вы хотите выполнить, будет вызываться напрямую, вы можете избежать дополнительного вызова функции, а код будет более чистым .. вот и все .. :) –

Почему у вас есть этот код? Сумасшедший. Снимите его:

if (current_width < 600) { 
    $('.footer-accordion-head').show(); 
    $('.footer-accordion-body').hide(); 

    $('.footer-accordion-head').click(function() { 
    $(".footer-accordion-body").slideToggle('400'); 
    return false; 
}

источник

2014-09-02 15:40:19

Переместить объявление щелчка в функцию $(document).ready.

В настоящий момент каждый раз, когда вы изменяете размер страницы, функция щелчка добавляется снова - так что повтор один раз на страницу изменяется. forked jsfiddle with change

источник

2014-09-02 15:46:10 Collett89

Accordion looping on resize

ответ

Смежные вопросы