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

！DOCTYPE html html htmlhealtheeta charset=' utf-8 '/title jquery实现页面详情展开收起/title样式。detailpd { padding-top :10 px；}/style脚本src=' http :http://libs。百度。com/jquery/1。10 .2/jquery。量滴js/显隐项目介绍详情$(函数view _ details _ click(){ $(' # detail main _ a ').bind('click '，function(){ if($(' # deal _ info _ box ')).是(' :隐藏'){ $(' # deal _ info _ box ').show()；$(这个)。查找(' #view_details ').文本('收起详情');$(这个)。查找('。fa ').removeClass('fa-angle-right ').添加CLaSS(' fa-angle-down ')；} else{ $('#deal_info_box ').hide()；$(这个)。查找(' #view_details ').文本('展开详情');$(这个)。查找('。fa ').removeClass('fa-angle-down ').添加CLaSS(' fa-angle-right ')；} });$('#detailmain_aa ').bind('click '，function(){ $('#deal_info_box ').hide()；$('#view_details ').文本('展开详情');});});/script/head body p class=' detail PD '项目详情介绍：/p a class=' detail main _ a ' href=' JavaScript : void(0)；'rel=' external nofollow ' rel=' external nofollow ' id=' detail main _ a ' span id=' view _ details '展开详情/spani 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/123 br/a class=' detail main _ aa TC ' href=' JavaScript : void(0)；'rel=' external nofollow ' rel=' external nofollow ' id=' detail main _ aa ' style=' width :130 px；显示：块；margin :0 auto ' span class=' theme _ fcolor ' id=' view _ detailss '收起详情/spani class=' fa fa-angle-up theme _ fcolor '/I/a/div/body/html使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery动画与特效用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

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