jQuery Resize函数奇怪地循环答案

【问题标题】：jQuery Resize function looping strangelyjQuery Resize函数奇怪地循环
【发布时间】：2014-09-13 19:09:39
【问题描述】：

当窗口宽度调整为 500 像素或更少时，我有 jQuery 代码为页面内容制作手风琴。

当我使用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(); }
});
});

【问题讨论】：

标签： jquery function resize jquery-ui-accordion

【解决方案1】：

点击时的奇怪行为是因为每次触发加载或调整大小事件时都添加了一个事件侦听器。

您必须将事件绑定移到加载/调整大小事件处理程序之外。

//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

【讨论】：