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


Posted in jQuery onJune 11, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun测试运行效果如下:

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

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

jQuery 相关文章推荐
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 #jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
You might like
php抽象类使用要点与注意事项分析
2015/02/09 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
小学生元旦广播稿
2014/02/21 职场文书
参赛口号
2014/06/16 职场文书
2014年派出所工作总结
2014/11/21 职场文书