点击显示或隐藏,添加类名或删除类名

    <div class="bzlist">
  
         <div class="bz_01"></div>
         <div class="bz_02">
              如何计算的金额?
              <div class="bz_block">根据已知量算出未知量;运算根据已知量算出未知量;运算根据已知量;运算根据已知量算出未知量;</div>
         </div>
         
    </div>

.bzlist{ background:#FFF; clear:both;}
.bz_01{ float:left; width:15%;}
.bz_01 p{ background:url(../images/bz/ico5.png) no-repeat; width:0.45rem; height:0.41rem; background-size:0.45rem 0.41rem; margin:0 auto; text-align:center; color:#FFF; font-size:0.22rem; line-height:0.36rem;height:0.99rem; margin-top:0.3rem;}
.bz_02{ float:right; width:96%; border-bottom:1px #dedede solid; line-height:0.99rem; font-size:0.24rem; font-size:#333; position:relative; text-indent:0.1rem; cursor:pointer;}
.bz_02s{ border:none;}
.bz_02:after{background:url(../images/bz/ico7.png) no-repeat; width:0.22rem; height:0.12rem; background-size:0.22rem 0.12rem; display:block; content:""; position:absolute; right:0.2rem; top:0.46rem;}
.bz_02_s:after{background:url(../images/bz/ico8.png) no-repeat; width:0.22rem; height:0.12rem; background-size:0.22rem 0.12rem; display:block; content:""; position:absolute; right:0.2rem; top:0.46rem;}

.bz_block{ clear:both; font-size:0.22rem; font-size:#666; line-height:0.4rem; text-indent:0; padding:0.1rem; display:none;}







<script src="http://m.hcgroup.com/cn/js/jquery-1.10.2.min.js"></script>
<script>
        
 $(".bz_02").click(function () {
         $(this).children().toggle(100);
         $(this).toggleClass("bz_02_s");
  });

 </script>

 

posted @ 2020-05-15 16:34  南瓜小园  阅读(255)  评论(0编辑  收藏  举报