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{
}
