Как отключить аккордеон от первого щелчка?

Question

У меня проблема с моим аккордеон. В первый раз, когда я нажимаю любую из заголовков, чтобы свернуть этот элемент, у него есть резкий поп, чтобы закрыть его. Я использую slideUp(), но, похоже, он не используется вначале. Если я продолжаю нажимать на строку заголовка для этого элемента, начнет работать slideUp()/slideDown().

Кроме того, мой подход не очень эффективен для повторного использования. Если вы посмотрите на событие click, я создаю его для каждого элемента аккордеона. Как настроить его так, чтобы он был «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();