調整大小的手風琴循環

在小於600px的屏幕上查看時，我有一個隱藏在手風琴中的菜單。在大於600px的屏幕上，菜單是可見的。調整大小的手風琴循環

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

它工作正常，但是當我調整窗口的大小比600px的大，然後回到小於600px的，然後按查看站點地圖它循環動畫多次。

我認爲它運行每個resize事件的函數，這是排隊的手風琴，然後循環它。但我不確定如何最好地命令語法來使它工作。

任何幫助，將不勝感激！

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

每次調用'。點擊（）'又增加了綁定。而且，這些在任何時候都不會被解除約束。因此，如果在600像素以下繼續調整窗口大小，最終可能會有100個處理程序，每個處理程序都準備排隊另一個'slideToggle（）'。 – 2014-09-02 15:46:15

的問題是，每次調整窗口的大小，並滿足條件時，要綁定一個新的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 2014-09-03 09:45:03

有 $（窗口）.resize（函數（）{ footernavmenufn（）之間的一個主要區別; }）; 和 $（窗口）.resize（footernavmenufn）; footernavmenufn（）; 不知道有什麼區別：/ – Ash 2014-09-03 09:52:39

井你手動調用一個匿名函數內部函數的第一個案例...第二如果你想執行的函數將被直接調用，你可以避免額外的函數調用，並且代碼將變得更清晰。這就是所有.. :) – 2014-09-03 10:06:42

爲什麼你有這段代碼？瘋狂的一個。刪除它：

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

調整大小的手風琴循環

回答

相關問題