原生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 相关文章推荐
图片Slider 带左右按钮的js示例
Aug 30 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 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读取xml实例代码
2010/01/28 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
Vuex 入门教程
2018/01/10 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python基于property()函数定义属性
2020/01/22 Python
如何在django中实现分页功能
2020/04/22 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
开会迟到检讨书
2014/01/08 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
医德医风个人总结
2015/02/28 职场文书
期中考试后的感想
2015/08/07 职场文书
感恩教师主题班会
2015/08/12 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书