js点击事件

来源：互联网发布：时尚界的凯撒大帝知乎编辑：程序博客网时间：2024/05/03 05:29

1、html部分

  <div class="panel-body active">       <div class="headline claerfix">           <div class="title fl">积分券是什么？</div>           <div class="right font fr">&#xe671;</div>           <div class="font down fr">&#xe672;</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变更为显示。

0 0