jQuery實現的頁面詳情展開收起功能示例

2019-11-19 13:40:02

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現的頁面詳情展開收起功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jQuery實現頁面詳情展開收起</title><style>.detailpd { padding-top:10px; }</style><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>// 顯隱項目介紹詳情 $(function view_details_click(){  $("#detailmain_a").bind('click',function(){   if($("#deal_info_box").is(":hidden")){    $("#deal_info_box").show();    $(this).find("#view_details").text("收起詳情");    $(this).find(".fa").removeClass("fa-angle-right").addClass("fa-angle-down");   }   else{    $("#deal_info_box").hide();    $(this).find("#view_details").text("展開詳情");    $(this).find(".fa").removeClass("fa-angle-down").addClass("fa-angle-right");   }  });  $("#detailmain_aa").bind('click',function(){   $("#deal_info_box").hide();   $("#view_details").text("展開詳情");  }); });</script></head><body> <p class="detailpd">  項目詳情介紹: </p> <a class="detailmain_a" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="detailmain_a">  <span id="view_details">展開詳情></span><i class="fa fa-angle-right"></i> </a> <div class="deal_info_box pb15" id="deal_info_box" style="display:none"> <!-- 此處引入要展開的具體文件內容 -->  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  123<br/>  <a class="detailmain_aa tc" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="detailmain_aa" style="width:130px;display:block;margin:0 auto">   <span class="theme_fcolor" id="view_detailss">收起詳情</span><i class="fa fa-angle-up theme_fcolor"></i>  </a> </div></body></html>

使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.VeVB.COm/code/HtmlJsRun測試運行效果如下：