javascript - 为 Accordion 打开/关闭添加缓动效果

Question

我对 JS 非常陌生，但我想要一个非常简单的 Accordion ，所以我制作了一个。由于某种原因，当我试图为它的打开/关闭添加缓和效果时，我不知所措。任何帮助将非常感激。谢谢!

CodePen of Accordion

js代码:

(function(){
// This class will be added to the expanded item
var activeItemClass = 'accordion-expanded';
var accordionItemSelector = '.accordion-section';
var toggleSelector = '.accordion-head';

$(toggleSelector).on('click', function() { 

    $(this)
        .closest(accordionItemSelector) // go up to the accordion item element
        .toggleClass(activeItemClass)
            .siblings()
            .removeClass(activeItemClass);
});

})();

Answer 1

既然你使用的是 jQuery，为什么不这样做:

var accordionItemSelector = '.accordion-body';
var toggleSelector = '.accordion-head';

$(toggleSelector).on('click', function() { 
  if (!$(this).next(accordionItemSelector).is(":visible"))
    $(toggleSelector).not($(this)).next(accordionItemSelector).slideUp();
  $(this).next(accordionItemSelector).slideToggle();   
});

UPDATED PEN