<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;border:0;font-family: "微软雅黑";}
ul,ol{list-style:none;}
a{text-decoration:none;color:#333;}
em,i{font-style:normal;}
body{background: #f2f2f2;}
.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
.fl{float:left;display:inline-block;}
.fr{float:right;display:inline-block;}
.div{width: 330px;margin: 100px auto;background: #ffffff;padding-top:10px; padding-bottom: 10px;border:1px #dfdfdf solid;}
.div h3{width: 277px;height:43px;background: #f6f6f4;margin: 0 auto;border:1px #ebebeb solid;border-radius: 9px;font-size: 14px;color:#b1926f;line-height: 45px;padding-left: 34px;background:url(images/zakladka.png) center 0 no-repeat; }
.div span{display: block;width:26px;height:37px;float:right;background: url(images/on1.png) center 0 no-repeat;cursor: pointer;}
.div ul{width: 270px;margin-left:40px; display: none;}
.div ul li{width: 260px;height: 26px;font-size: 12px;color: #bca94c;line-height:26px; cursor:pointer;}
.div .spbg{background: url(images/on2.png) center 0 no-repeat;}
.div .on{display: block;animation:on 0.6s ease;animation-fill-mode: forwards;}
@keyframes on{
0%{height: 0px;opacity: 0.2;}
25%{opacity: opacity:0.5;}
50%{opacity: 0.7}
100%{height: 140px; opacity: 1;}
}
.div .off{display: block;animation:off 0.6s ease;animation-fill-mode: forwards;}
@keyframes off{
0%{height: 140px;}
30%{opacity: 0.3;}
100%{height: 0px; opacity: 0; visibility:hidden;}
}
</style>
</head>
<body>
<div class="div"">
<h3><span class="spbg"></span>Item 1</h3>
<ul class="on">
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
</ul>
<h3><span></span>Item 2</h3>
<ul>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
</ul>
<h3 ><span></span>Item 3</h3>
<ul>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
<li>Item without sunitms</li>
</ul>
<h3 >Item without sunitms</h3>
<h3 >Item without sunitms</h3>
</div>
<script>
var div = document.getElementsByClassName("div")[0];
var uls = div.getElementsByTagName("ul");
var lis = div.getElementsByTagName("li");
var span = div.getElementsByTagName("span");
var len = lis.length;
var liH = 26;
var finish = false;
for(i = 0; i < span.length; i++){
span[i].index = i;
span[i].onclick = function(){
if(!finish){
this.className = "spbg";
uls[this.index].className = "on";
finish = true;
}else{
this.className = "";
uls[this.index].className = "off";
finish = false;
}
}
}
</script>
</body>
</html>
