Javascript 为手风琴打开/关闭添加缓和效果

我是JS的新手，但我想要一个非常简单的手风琴，所以我做了一个。由于某种原因，当我试图在开盘/收盘时添加缓和效果时，我感到不知所措。任何帮助都将不胜感激。谢谢大家!

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);
});

})();

---

既然您使用的是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();   
});

---

以下是手风琴的工作代码：-

$(document).ready(function(){
 $('.item').click(function (){
   if($(this).next('.item-data').css('display') != 'block'){
     $('.active').slideUp('fast').removeClass('active');
     $(this).next('.item-data').addClass('active').slideDown('slow');
    } else {
     $('.active').slideUp('fast').removeClass('active');
    }
 });
});   

和HTML

<div class='container'>
<div class='item'>Item 1</div>
<div class='item-data'>
    <div>
        This is the content for Accordion 1
    </div>
</div>
<div class='item'>Item 2</div>
<div class='item-data'>
    <div>
        This is the content for Accordion 2
    </div>
</div>
<div class='item'>Item 3</div>
<div class='item-data' >
    <div>
        This is the content for Accordion 3
    </div>
</div>
<div class='item'>Item 4</div>
<div class='item-data' >
    <div>
        This is the content for Accordion 4
    </div>
</div>

项目1
这是手风琴1的内容
项目2
这是手风琴2的内容
项目3
这是手风琴3的内容
项目4
这是手风琴4的内容

CSS

.集装箱
{
显示：块；
宽度：500px；
高度：自动；
保证金：0自动；
}
.项目
{
显示：块；
宽度：继承；
高度：40px；
线高：40px；
背景:#555；
边框：1px实心#000；
光标：指针；
颜色：#fff；
}
.项目数据
{
显示：无；
宽度：继承；
高度：自动；
边框：1px实心#ccc；
}
.主动{
背景：#eee；
颜色：#000；
}
.物料数据组{
利润率：30像素；
}

Hi，尝试通过

opacity

slideToggle（）

更改

display

属性可能有用，但需要重新构造。谢谢！非常感谢

<style type="text/css">
.container
{
    display:block;
    width: 500px;
    height : auto ;
    margin: 0 auto;
}
.item
{
    display : block;
    width : inherit ;
    height : 40px;
    line-height : 40px;
    background : #555 ;
    border: 1px solid #000 ;
    cursor: pointer;
    color: #fff;
}
.item-data
{
    display : none ;
    width : inherit ;
    height : auto ;
    border: 1px solid #ccc;
}
.active {
    background : #eee ;
    color : #000 ;
}
.item-data div{
    margin: 30px;
}
</style>