版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cometwo/article/details/52510793
原地址：http://www.jq22.com/jquery-info9370
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>手风琴效果</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
margin: 50px auto;
width: 300px;
height: auto;
border: solid 1px #cccccc;
}
.Collapsing {
width: 100%;
height: 30px;
line-height: 30px;
cursor: pointer;
border-bottom: 1px solid white;
text-align: center;
background-repeat: no-repeat;
background-position: center right no-repeat;
background-image: url(images/pro_left.png);
background-color: #BDBDBD;
color: #fff;
}
.coll_body {
display: none;
}
.coll_body a {
display: block;
margin: 10px;
text-align: center;
background: #ebebeb;
}
.current {
background-image: url(images/pro_down.png);
}
</style>
</head>
<body>
<div class="box">
<h3 class="Collapsing current">星期一</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期二</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期三</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期四</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期五</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".coll_body").eq(0).show();
$(".Collapsing").click(function() {
$(this).toggleClass("current").siblings('.Collapsing').removeClass("current"); //切换图标
$(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
});
});
</script>
</body>
</html>