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>
  • 相关阅读:
    最近半年
    CentOS 6.4和Eclipse Juno CDT(4.2.2)的bug
    cygwin/X XDMCP连接CentOS
    手把手教你emacs cedet C/C++自动补全
    ProFont – 识别度极高的终端字体
    ACE之旅——环境搭建、HelloWorld
    静态链表在优化中的应用
    ACE之旅——第一个ACE通讯程序daytime
    ThinkPHP 自定义标签测试 冰糖
    FreeTextBox使用详解 (版本3.1.1)
  • 原文地址:https://www.cnblogs.com/su1637/p/12895745.html
Copyright © 2011-2022 走看看