<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 200px;
}
.accordion{
padding: 10px;
}
.accordion>p{
background: #ccc;
color: #333;
padding: 0 10px;
line-height: 26px;
margin-top: 5px;
}
.accordion>p.active{
background: blue;
color: #fff;
}
.accordion>p em{
margin-right: 10px;
}
.accordion>div, .accordion>ul{
border: 1px solid blue;
display: none;
}
.accordion>ul{
list-style: none;
}
.accordion>ul li{
padding: 0 10px;
line-height: 26px;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(".accordion>p").click(function(){
if($(this).hasClass("active")){
$(this).find("em").removeClass("icon-jian").addClass("icon-add");
$(this).removeClass("active").next().slideUp();
} else {
$(this).find("em").removeClass("icon-add").addClass("icon-jian");
$(this).addClass("active").next().slideDown();
}
});
</script>
</head>
<body>
<div class="wrap">
<div class="accordion">
<p><em class="iconfont icon-add"></em>一一一一</p>
<div class="accordion">
<p><em class="iconfont icon-add"></em>1111111</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<p><em class="iconfont icon-add"></em>2222222</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<p><em class="iconfont icon-add"></em>二二二二</p>
<div class="accordion">
<p><em class="iconfont icon-add"></em>1111111</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<p><em class="iconfont icon-add"></em>2222222</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</div>
</body>
</html>
折叠 jQuery
猜你喜欢
转载自blog.csdn.net/qq_29994361/article/details/84619743
今日推荐
周排行