Jquery - 高度动画实现手风琴效果

accordion.html

<link rel="stylesheet" href="路径/accordion.css">
<script src="路径/accordion.js"></script>

<div id="my-accordion">
    <div>《西游记》简介</div>
    <div>一个和尚和四个动物的故事xxxxx</div>
    <div>《水浒传》简介</div>
    <div>105个男人和三个女人的故事xxxxx</div>
    <div>《红楼梦》简介</div>
    <div>一个男人和一群女人的故事xxxxx</div>
</div>

$("#my-accordion").accordion();

accordion.js

jQuery.fn.accordion=function(){
    var $parent=this;
    $parent.addClass("accordion")
    .children(":nth-child(2n+1)")
    .addClass("title")
    .next()
    .addClass("content fade")
    .first()
    .addClass("in")
    $parent.on("click",".title",e=>
        $(e.target).next(".content").toggleClass("in")
        .siblings(".content").removeClass("in")
    );
}

accordion.css

.accordion{width:80%; margin:0 auto;}
.accordion>.title{
    background:#eee; border:1px soild #aaa;
    padding:6px; font-size:1.5em; 
    font-weight:bold; cursor:pointer;
}
.accordion>.content{
    border-left:1px solid #eee;
    border-right:1px solid #eee;
}
.accordion>:last-child{
    border-bottom:1px solid #eee;
}
.accordion>.content.fade{
    height:0;
    opacity:0;
    overflow:hidden;
    transition:all .5s linear;
}
.accordion>.content.in{
    height:84px;
    opacity:1;
}
.alert.fade{

}
.alert.in{

}