jQuery 플러그인을 삭제하십시오

Question

숨겨진 상자에 회전식 메뉴가 있습니다. div는 onclick으로 표시되어 작동하는 플러그인을 초기화합니다.

상자를 닫은 다음 다시 열면 플러그인이 다시 초기화되어 2 개의 회전식 슬라이드 쇼가 표시됩니다. 내가 div를 닫을 때 컨베이어를 죽일 방법이 있습니까?

// show hide dropdowns 
$("#category").click(function(e){ 
    e.preventDefault(); 
    $('.style-dropdown, .brand-dropdown').hide(); 


    $(".category-dropdown").fadeToggle(); 

    $(this).toggleClass("active"); 
    $('a#style, a#brand').removeClass("active"); 

    $("#category-slider").flexisel({ 
     visibleItems: 6, 
     animationSpeed: 1000, 
     autoPlay: true, 
     autoPlaySpeed: 6000,    
     pauseOnHover: true, 
     enableResponsiveBreakpoints: true, 
     responsiveBreakpoints: { 
      portrait: { 
       changePoint:480, 
       visibleItems: 1 
      }, 
      landscape: { 
       changePoint:640, 
       visibleItems: 2 
      }, 
      tablet: { 
       changePoint:768, 
       visibleItems: 3 
      } 
     } 
    }); 

});

Answer 1

flexisel 플러그인에는 jCarousel 플러그인과 같은 destroy() 메소드가없는 것 같습니다. 그래서 회전 목마가 스스로 죽일 수는 없습니다.

하지만 개봉 할 때마다 회전식 캐 러셀을 초기화하는 대신 회전식 캐 러셀을 닫을 때 숨기고 여는 동시에 동일한 회전식 캐너를 표시하는 것이 어떻습니까? init() 메소드에 의해 호출되는 initializeItems() 메소드를 다시 호출하는 경우.

업데이트 된 코드를 통해 모든 클릭 이벤트에서 flexisel() 메서드를 호출하고 있음을 알 수 있습니다. 한 번만 호출해야합니다. 다음과 같이 시도하십시오.

if (!carousel) { 
    var carousel = $("#category-slider").flexisel({ 
    ... 
    }); 
} 

Answer 2

우려 사항을 분리하십시오.

초기화 방법을 .click() 기능 밖으로 옮깁니다. 문서 로드맵에 따라 한 번 초기화해야합니다. 그 안에있는 컨테이너를 보이거나 숨기는 것만으로도 충분합니다. 슬라이더가 상자에 없으면 click 이벤트 도중 해당 요소를 대상으로 지정하십시오.

$("#category").click(function(e){ 
    e.preventDefault(); 
    $('.style-dropdown, .brand-dropdown').hide(); 


    $(".category-dropdown").fadeToggle(); 

    $(this).toggleClass("active"); 
    $('a#style, a#brand').removeClass("active"); 

}); 

$(window).load(function() { 
    $("#category-slider").flexisel({ 
     visibleItems: 6, 
     animationSpeed: 1000, 
     autoPlay: true, 
     autoPlaySpeed: 6000,    
     pauseOnHover: true, 
     enableResponsiveBreakpoints: true, 
     responsiveBreakpoints: { 
      portrait: { 
       changePoint:480, 
       visibleItems: 1 
      }, 
      landscape: { 
       changePoint:640, 
       visibleItems: 2 
      }, 
      tablet: { 
       changePoint:768, 
       visibleItems: 3 
      } 
     } 
    }); 
)}; 

편집 : 명확히하기 위해, 당신은 $("#category-slider").hide(); 전화 나 클릭 방법도 보여 숨길 몇 가지 클래스를 전환 할 수 있습니다.