点击显示或隐藏,添加类名或删除类名
<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>
南瓜小园 —— 从零开始,重构想象!