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实现提示语淡入效果
May 05 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
一个php作的文本留言本的例子(六)
2006/10/09 PHP
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
连接Python程序与MySQL的教程
2015/04/29 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
安全检查验收制度
2014/01/12 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
工人先锋号申报材料
2014/12/29 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏