<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jquery 展开 收起</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> </head> <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("展开详情"); }); });*/ /*//方法二 $(function view_details_click(){ $("#detailmain_a").click(function () { $("#deal_info_box").slideToggle(); }); $("#detailmain_aa").click(function () { $("#deal_info_box").slideToggle(); }); });*/ //方法三 $(function view_details_click(){ $("#detailmain_a").click(function () { if($("#deal_info_box").is(":hidden")){ $('#deal_info_box').slideDown('slow'); $(this).text("收起︿"); } else{ $('#deal_info_box').slideUp('slow'); $(this).text("展开﹀"); } }); }); </script> <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>
代码可直接复制站些到本地编辑器中测试。