jQuery Resize 함수가 이상하게 반복됩니다.

Question

창 너비가 500px 이하로 조정될 때 페이지 콘텐츠에 대한 아코디언을 만들 수있는 jQuery 코드가 있습니다.

jQuery(window).load(function() {과 같이 아코디언을 사용해야합니다. 하지만 jQuery(window).resize(function() { 또는 jQuery(window).on("load resize",function(e){ 스크립트를 사용하면 스크립트가 이상하게 작동하며 루프가 실행됩니다 (아코디언 콘텐츠가 열리고 닫힙니다).

크기를 조정할 때 아코디언을 작동 시키려면 크기 조정 기능을 사용해야합니다. 크기 조정 후 아코디언을 작동 시키려면 페이지를 다시로드 할 필요가 없습니다.

여기 코드와 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(); } 
}); 
}); 

Answer 1

로드 또는 크기 조정 이벤트가 트리거 될 때마다 이벤트 수신기를 추가하기 때문에 이상한 동작이 발생합니다.

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