1、html部分
<div class="panel-body active">
<div class="headline claerfix">
<div class="title fl">积分券是什么?</div>
<div class="right font fr"></div>
<div class="font down fr"></div>
</div>
<div class="key">办理单位卡应提供单位营业执照副本原件、经办人个人有效证件原件并留存复印件;需要开具增值税发票的客户应同时提供单位税务登记证原件、一般纳税人资格证书原件并留存复印件。</div>
</div>
2、css部分
.panel-body{
color: #686363;
.headline{
font-size: 15px;
height: 40px;
line-height: 40px;
border-bottom:1px solid #E8E8E8;
.right{
font-size: 14px;
display: block;
}
.down{
font-size: 14px;
display: none;
}
}
.key{
padding: 5px 0;
border-bottom:1px solid #E8E8E8;
display: none;
font-size: 12px;
text-indent:14px;
}
&.active{
.headline{
.right{
display: none;
}
.down{
display: block;
}
}
.key{
display: block;
}
}
}
3、js区域
<script src="js/jquery.min.js"></script>
<script>
$('.headline').on('click',function(){
$(this).parents('.panel-body').toggleClass('active');
})
</script>
4、实现原理:
css设置:标题右侧下拉箭头与key设置隐藏,当父级active的时候右箭头隐藏,下拉箭头与key设置显示。
js:用选择器选择出点击的对象.headline,找到他们的父级们,toggleClass就是removeClass()和addClass()的合体版也就是说若当前为显示那么移除active变更为隐藏,若当前为隐藏那么增加active变更为显示。