原生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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
JS定时器实例
Apr 17 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
JS实现简易日历效果
Jan 25 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP7常量数组用法分析
2016/09/26 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
AngularJS语法详解
2015/01/23 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
详解jQuery事件
2017/01/13 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
在Python中处理XML的教程
2015/04/29 Python
Python3爬虫全国地址信息
2019/01/05 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
总裁秘书岗位职责
2013/12/04 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
活动总结格式范文
2014/04/26 职场文书
企业领导对照检查材料
2014/08/20 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书