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测试运行效果如下：