原生JS仿QQ阅读点击展开、收起效果


Posted in Javascript onMarch 08, 2017

使用JS技术实现QQ阅读类似的点击展开、收起效果,具体内容如下

一、定义展开函数showdiv(),实现点击"全文"按钮,全文展开。

1.点击展开函数,需要将触发点击事件的按钮作为参数传入
2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏。
3.将紧跟其父元素之后的元素设置为显示。

二、定义收起函数hidediv(),实现点击"收起全文"按钮,全文内容隐藏。

1.点击收起函数,需要将触发点击事件的按钮作为参数传入
2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏。
3.将紧跟其父元素之前的元素设置为显示。

注意:为了浏览器兼容,一定要判断找到的节点nodeType是否为元素节点。

效果如图:

原生JS仿QQ阅读点击展开、收起效果

具体代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 body
 {
  margin: 0 auto;
  padding: 0;
  font-size: 9pt;
  line-height: 180%;
 }
 #pn
 {
  background: #f8f8f8;
  height: auto;
  width: 750px;
  margin: 0 auto;
  padding: 5px;
 }
 .artTitle
 {
  font-weight: bold;
  color: #3030FF;
  font-size: 11pt;
 }
 .subTitle
 {
  color: #CCC;
 }
 .content
 {
  border: 1px solid #CCC;
  display: none;
  padding: 5px;
 }
 .btm
 {
  text-align: right;
  height: 30px;
 }
 .btn
 {
  width: 80px;
  height: 20px;
  padding: 5px 3px 5px 3px;
  text-align: center;
  text-decoration: none;
  background: #f0f0f0;
  border: 1px solid #CCC;
 }
 </style>
 <script type="text/javascript">
 // 显示函数
 function showdiv(obj) {
  var x=obj.parentNode;
  var y=x.nextSibling;
  while(y.nodeType!=1){
  y=y.nextSibling;
  }
  x.style.display="none";
  y.style.display="block";
 }

 // 隐藏函数
 function hidediv(obj) {

  var x=obj.parentNode.parentNode;
  var y=x.previousSibling;
  while(y.nodeType!=1){
  y=y.previousSibling;
  }
  x.style.display="none";
  y.style.display="block";
 }
 </script>
</head>
<body>
<div id="pn">
 <div id="art0">
 <p class="artTitle">
  Slack:团队日常沟通协作工具典范
 </p>
 <p class="subTitle">
  作者:来自网络 发表时间:2014-3-1
 </p>
 <p>
  现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:
  在所有端都可以进行,即桌面端,包括Mac OS和Windows系统;web端即浏览器;移动端的支持包括iOS和Android。 同时,移动端是有良好体验以满足移动办公便利性的。
  聚焦核心行为,即"发布一条信息",团队成员只需要做一个这个基本行为即可。 发布一条... <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript:showdiv(this);" >展开全文</a></p>
 <div class="content">
  <p>现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:</p>
  <p>聚焦核心行为,即“发布一条信息”,团队成员只需要做一个这个基本行为即可。</p>
  <p>发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等,以便协作更好进行,如果文件能快速预览则更好。</p>
  <p>支持@方式直接和单个团队成员沟通,并且能够被其他成员看到和参与进来。</p>
  <p>以#来进行快速形成话题组或者项目组。</p>
  <p>良好的搜索支持。 上述虽然是Slack的特性,也是我对团队日常协作工具的要求——显然,Slack完全符合这些要求,而且产品做得很易用。这些要求其实就是我对“移动、社交、云端存储”的理解,这三个因素基本会重写很多软件和应用。</p>
  <p>Slack有免费的lite版本,但收费版本似乎价格对中文用户而言略高。</p>
  <p>Slack由我很喜欢的项目Flickr的创始人新公司TinySpeck创办,因此基础甚好。而且从目前看,基本上会成为一个很成功的应用,所以在产品持续发展上面应该毫无问题。</p>
  <p>The post Slack:团队日常沟通协作工具典范 appeared first on 游山打猎.</p>
  <div class="btm">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" onclick="javascript:hidediv(this);">收起全文</a>
  </div>
 </div>
 </div>
 <hr />
 <div id="art1">
 <p class="artTitle">
  Slack:团队日常沟通协作工具典范
 </p>
 <p class="subTitle">
  作者:来自网络 发表时间:2014-3-1
 </p>
 <p>现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:
  在所有端都可以进行,即桌面端,包括Mac OS和Windows系统;web端即浏览器;移动端的支持包括iOS和Android。 同时,移动端是有良好体验以满足移动办公便利性的。
  聚焦核心行为,即"发布一条信息",团队成员只需要做一个这个基本行为即可。 发布一条... <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript:showdiv(this);">展开全文</a></p>
 <div class="content">
  <p>现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:</p>
  <p>在所有端都可以进行,即桌面端,包括Mac OS和Windows系统;web端即浏览器;移动端的支持包括iOS和Android。</p>
  <p>同时,移动端是有良好体验以满足移动办公便利性的。</p>
  <p>聚焦核心行为,即“发布一条信息”,团队成员只需要做一个这个基本行为即可。</p>
  <p>发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等,以便协作更好进行,如果文件能快速预览则更好。</p>
  <p>支持@方式直接和单个团队成员沟通,并且能够被其他成员看到和参与进来。</p>
  <p>The post Slack:团队日常沟通协作工具典范 appeared first on 游山打猎.</p>
  <div class="btm">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" onclick='hidediv(this)'>收起全文</a>
  </div>
 </div>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
js实现简易拖拽的示例
Oct 26 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 #Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 #Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 #Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 #Javascript
教你用十行node.js代码读取docx的文本
Mar 08 #Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 #Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 #Javascript
You might like
php array_search() 函数使用
2010/04/13 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python进阶教程之动态类型详解
2014/08/30 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
旅游专业职业生涯规划范文
2014/01/13 职场文书
十八大感想感言
2014/02/10 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
12岁生日演讲稿
2014/05/14 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
六一儿童节致辞
2015/07/31 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
MySQL数据库表约束讲解
2022/06/21 MySQL