jQuery实现页面详情展开收起

来源：互联网发布：json测试工具编辑：程序博客网时间：2024/06/05 04:05
<!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);" 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);" 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>
0 0