zoukankan      html  css  js  c++  java
  • 点击显示或隐藏,添加类名或删除类名

        <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; 15%;}
    .bz_01 p{ background:url(../images/bz/ico5.png) no-repeat; 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; 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; 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; 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>
  • 相关阅读:
    好久没来博客园写博客了
    配置apache apache服务器如何配置多站点
    Discuz对不起,您安装的不是正版应用的解决办法
    解决php deprecated 的问题
    PHP乱码完美解决
    block,inline和inline-block概念和区别(转)
    C# 的各种排序
    设计模式的学习
    一些随笔
    笔记 日常的记录
  • 原文地址:https://www.cnblogs.com/su1637/p/12895745.html
Copyright © 2011-2022 走看看