页面展开收起php代码,jQuery实现的页面详情展开收起功能示例

本文实例讲述了jQuery实现的页面详情展开收起功能。分享给大家供大家参考，具体如下：

jQuery实现页面详情展开收起

.detailpd { padding-top:10px; }

// 显隐项目介绍详情

$(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("展开详情");

});

});

项目详情介绍:

展开详情>

123

123

123

123

123

123

123

123

123

123

123

123

123

123

123

收起详情

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

希望本文所述对大家jQuery程序设计有所帮助。