jquery實現toggle效果

原文：https://www.jianshu.com/p/110361f50071

• html代碼

<div class="grace-rows grace-common-mt " style="width: 90%;border-bottom:1px solid #E9E9E9"> <div style="text-align: left;text-indent:1em; width: 70%;line-height: 40px;font-size: 20px;font-weight: 600;"> 基本信息</div> <div style="width: 30%;line-height: 42px;" class=""><span type="button" class="mui-icon mui-icon-arrowup" style="font-size: 14px;" id="show_jiben_xinxi"> 收起</span> </div> </div> <div id="jiben_xinxi_container" style="width: 90%;" class="grace-columns grace-align-items"> <--do something...--> </div>

• js代碼

 //顯示隱藏 $('#show_jiben_xinxi').click(function () { if($(this).hasClass('mui-icon-arrowup')){ $(this).text(' 顯示'); $(this).removeClass('mui-icon-arrowup'); $(this).addClass('mui-icon-arrowdown'); $('#jiben_xinxi_container').toggle(); }else{ $(this).text(' 收起'); $(this).removeClass('mui-icon-arrowdown'); $(this).addClass('mui-icon-arrowup'); $('#jiben_xinxi_container').toggle(); } }); 

效果

 

 

 

 

0人點贊

 

前端