结构代码:
<div class="list-group margin-top-sm">
<p class="list-title">A B C D E F G<img src="assets/i/angle_down.png" class="icon"></p>
<ul>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
<li><a href="details.html"> H I J K L M N O P Q</a></li>
</ul>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/public.js"></script>
css样式:
.list-group {
background-color:#fff;
padding-left: 25px;
padding-right: 25px;
}
.list-group .list-title{
background:url(../i/icon_01.png) no-repeat 12px center;
background-size:22px;
padding: 12px 40px 12px 40px;
font-size:18px;
border-bottom:1px solid #eae7e7
}
.list-group .list-title .icon{
float:right;
width: 22px;
margin-top:7px;
cursor: pointer;
}
.list-group.active .list-title .icon{
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.list-group ul{
margin-left:36px;
margin-right:36px;
display: none;
}
.list-group.active ul{
display:block;
}
.list-group li a{
border-bottom:1px solid #eae7e7;
padding:19px;
color: #333;
display:block;
}
.list-group li a:active,
.list-group li a:hover{
background-color:#eee
}
js代码:
$('.list-group .icon').click(function(event) {
if($(this).parents('.list-group').hasClass('active')){
$(this).parents('.list-group').removeClass('active')
}else{
$(this).parents('.list-group').addClass('active')
}
});