jQuery Resize函數循環奇怪

當窗口寬度調整爲500px或更小時，我有jQuery代碼爲頁面內容製作手風琴。jQuery Resize函數循環奇怪

當我使用jQuery(window).load(function() {手風琴的作品，它應該。但是，當我使用jQuery(window).resize(function() {或jQuery(window).on("load resize",function(e){腳本是蠻橫作用的，它循環（打開和關閉手風琴內容）。

我需要使用resize函數使窗口大小調整時手風琴工作。調整大小後，不需要重新加載頁面以獲得手風琴的工作。

這裏是代碼和JSFIDDLE的例子。在JSFIDDLE中，嘗試調整「結果」窗口的大小並單擊「內容標題」。

jQuery(window).on("load resize",function(e){ 

jQuery(function() { 
if(jQuery(window).width() <= 500) { 


    //ACCORDION BUTTON ACTION 
    jQuery('h3').click(function() { 
     if(jQuery(this).data("slided") === true) { 
      jQuery(this).next().slideUp('normal'); 
      jQuery(this).data("slided", false); 
     } else { 
      jQuery('h3').data('slided',false); 
      jQuery('.sec').slideUp('normal'); 
      jQuery(this).next().slideDown('normal'); 
      jQuery(this).data("slided", true); 
     } 
    }); 

    //HIDE THE DIVS ON PAGE LOAD  
    jQuery(".sec").hide(); 
} else { jQuery(".sec").show(); } 
}); 
});

來源

2014-09-13 ace

單擊上的奇怪行爲是因爲每次觸發load或resize事件時都添加一個事件偵聽器。

您必須在load/resize事件處理程序之外移動事件綁定。

//ACCORDION BUTTON ACTION 
jQuery(function() { 
    jQuery('h3').click(function() { 
     if(jQuery(this).data("slided") === true) { 
      jQuery(this).next().slideUp('normal'); 
      jQuery(this).data("slided", false); 
     } else { 
      jQuery('h3').data('slided',false); 
      jQuery('.sec').slideUp('normal'); 
      jQuery(this).next().slideDown('normal'); 
      jQuery(this).data("slided", true); 
     } 
    });  
}); 

jQuery(window).on("load resize",function(e){ 
    if(jQuery(window).width() <= 500) {   
    //HIDE THE DIVS ON PAGE LOAD  
    jQuery(".sec").hide(); 
} else { 
    jQuery(".sec").show(); 
} 
});

jsfiddle

來源

2014-09-13 19:20:47

jQuery Resize函數循環奇怪

回答

相關問題