本文实例讲述了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.freexyz.cn/code/HtmlJsRun测试运行效果如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
© 版权声明
THE END
暂无评论内容