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(); } 
}); 
});

答

单击上的奇怪行为是因为每次触发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

jQuery Resize函数循环奇怪

相关推荐