js点击事件

1、html部分

  <div class="panel-body active">
       <div class="headline claerfix">
           <div class="title fl">积分券是什么？div>
           <div class="right font fr">&#xe671;

<div class="font down fr">&#xe672;

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变更为显示。