아코디언이 처음 클릭 할 때 터지는 것을 어떻게 멈추게합니까?

Question

아코디언에 문제가 있습니다. 해당 항목을 접을 제목 표시 줄 중 처음을 클릭하면 닫을 날카로운 팝업이 나타납니다. slideUp()을 사용하고 있지만 처음에는 사용하지 않는 것으로 보입니다. 해당 항목의 제목 표시 줄을 계속 클릭하면 slideUp()/slideDown()이 작동하기 시작합니다.

또한 내 접근 방식은 재사용성에 매우 효율적이지 않습니다. 클릭 이벤트를 보면 각 아코디언 항목에 대해 생성하고 있습니다. 'item1', 'item2', 'item3'이상이되도록 설정하면 각각에 대해 새로운 클릭 이벤트를 만들지 않고도 각 항목에 대해 아코디언이 작동합니까?

은 내가 jsfiddle가 여기에 게시 있습니다 http://jsfiddle.net/Jfd9n/1/

여러분의 도움에 감사드립니다!

// Accordion Plugin 
(function($){ 
    $.fn.scaccordion = function(options){ 

     var defaults = { 
      // Variables Here 
     }; 

     var options = $.extend(defaults, options); 

     $('div.accordionitem').addClass('active'); 
     $('div.accordionitem').slideDown(); 
     console.log('Add class: active to all div.accordionitem elements.') 

     // Click Event for item1: Open 
     $(this).find('div.accordionitem.item1').on('click', function (e) { 
      e.preventDefault(); 

      console.log('Accordion Item 1 Clicked'); 

      if ($('div.accordionitem.item1').hasClass('active')) { 
       $('div.accordionitem.item1 div.accordion_content').slideUp(); 
       $('div.accordionitem.item1').removeClass('active'); 
      } else { 
       $('div.accordionitem.item1 div.accordion_content').slideDown(); 
       $('div.accordionitem.item1').addClass('active'); 
      } 
     }); 

     // Click Event for item2: Open 
     $(this).children('div.accordionitem.item2').on('click', function (e) { 
      e.preventDefault(); 

      console.log('Accordion Item 2 Clicked'); 

      if ($('div.accordionitem.item2').hasClass('active')) { 
       $('div.accordionitem.item2 div.accordion_content').slideUp(); 
       $('div.accordionitem.item2').removeClass('active'); 
      } else { 
       $('div.accordionitem.item2 div.accordion_content').slideDown(); 
       $('div.accordionitem.item2').addClass('active'); 
      } 
     }); 

     // Click Event for item1: Open 
     $(this).children('div.accordionitem.item3').on('click', function (e) { 
      e.preventDefault(); 

      console.log('Accordion Item 3 Clicked'); 

      if ($('div.accordionitem.item3').hasClass('active')) { 
       $('div.accordionitem.item3 div.accordion_content').slideUp(); 
       $('div.accordionitem.item3').removeClass('active'); 
      } else { 
       $('div.accordionitem.item3 div.accordion_content').slideDown(); 
       $('div.accordionitem.item3').addClass('active'); 
      } 
     }); 
    }; 
})(jQuery); 

$('div.taccholder').scaccordion(); 

Answer 1

이것에 대해 업데이트 방법을 참조 jsfiddle

귀하의 코드 :

확실히 속임수를 썼는지

// Accordion Plugin 
(function($){ 
    $.fn.scaccordion = function(options){ 

     var defaults = { 
      // Variables Here 
     }; 

     var options = $.extend(defaults, options); 

     $('div.accordionitem').addClass('active'); 
     console.log('Add class: active to all div.accordionitem elements.') 

     // Click Event for item1: Open 
     $(this).find('div.accordionitem').on('click', function (e) { 
      e.preventDefault(); 
      var self = $(this); 
      if ($(this).hasClass('active')) { 

       $(this).find('.accordion_content').slideUp(300, function() { 
        self.removeClass('active'); 
       }); 
      } else { 

       $(this).find('.accordion_content').slideDown(300, function() { 
       self.addClass('active');  
       }); 
      } 
     }); 
    }; 
})(jQuery); 

$('div.taccholder').scaccordion();