原生JS仿QQ阅读点击展开、收起效果
作者:Vampire-blog 发布时间:2024-04-22 13:25:17
标签:js,点击展开,点击收起
使用JS技术实现QQ阅读类似的点击展开、收起效果,具体内容如下
一、定义展开函数showdiv(),实现点击"全文"按钮,全文展开。
1.点击展开函数,需要将触发点击事件的按钮作为参数传入
2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏。
3.将紧跟其父元素之后的元素设置为显示。
二、定义收起函数hidediv(),实现点击"收起全文"按钮,全文内容隐藏。
1.点击收起函数,需要将触发点击事件的按钮作为参数传入
2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏。
3.将紧跟其父元素之前的元素设置为显示。
注意:为了浏览器兼容,一定要判断找到的节点nodeType是否为元素节点。
效果如图:
具体代码:
<!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="#" 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="#" 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="#" 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="#" class="btn" onclick='hidediv(this)'>收起全文</a>
</div>
</div>
</div>
</div>
</body>
</html>
0
投稿
猜你喜欢
- 今年国庆节也是中秋节,首先祝大家节日快乐,本文我们使用 Python 来给自己的头像加一个小国旗或小月饼。国旗对于国旗,我们可以使用 Pyt
- 本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考,具体如下:运行效果截图如下:示例代码如下:<!DOC
- 介绍:SQL Server 2008变更数据捕获SQL Server 2008的CDC函数读取激活了CDC的每个表所关联的事务日志来记录系统
- 前段时间,微信群有一个朋友问了下面这个问题,虽然很简单,但是觉得有必要和大家做一个知识分享。这个问题一共有两个需求:① 获取视频的文件大小;
- Python----OS 文件目录处理import osimport time# 获取当前文件的绝对路径dir_1 = os.path.ab
- SQLPrompt是Sql Server 开发智能提示插件,方便查询表结果,避免了开发人员一个个敲查询语句、执行语句等,下面带大家仔细了解一
- 图像标注在计算机视觉中很重要,计算机视觉是一种技术,它允许计算机从数字图像或视频中获得高水平的理解力,并以人类的方式观察和解释视觉信息。注释
- 本文实例讲述了Python基于xlrd模块操作Excel的方法。分享给大家供大家参考,具体如下:一、使用xlrd读取excel1、xlrd的
- CNN(Convolutional Neural Networks) 卷积神经网络简单讲就是把一个图片的数据传递给CNN,原涂层是由RGB组
- eclipse安装Python插件之后,主要是为了方便Python代码就可以再Eclipse进行代码脚本,使用Eclipse开发Python
- 在ASP中,FSO的意思是File System Object,即文件系统对象。
- 前提:list以及array是python中经常会用到的数据类型,当需要对list以及array进行文件的读写操作的时候,由于write函数
- 光的干涉干涉即两束光在叠加过程中出现的强度周期性变化情况,其最简单的案例即为杨氏双缝干涉。如图所示,光从 S S S点发出,通过两个狭缝 S
- 首先要兼容IE\FF滴然后有一个环境与条件:必须是使用em单位布局。因为这个是利用字号做缩放效果,并且兼容fontSize各项单位,例如px
- 一、 官网下载安装包: 官网网址:https://www.python.org/ 我下载的是3.6.3版本,如下图:&n
- 本文实例讲述了Python3.5常见内置方法参数用法。分享给大家供大家参考,具体如下:Python的内置方法参数详解网站为:https://
- 添加用户(随着用户的创建,自动产生与用户同名的schema) CREATE USER "TESTER" PROFILE
- 这篇文章主要介绍了Python箱型图绘制与特征值获取过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- 不了解的同学先“点这里”看看什么是Firebug。简单来说,Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DO
- 总有一些程序在windows平台表现不稳定,动不动一段时间就无响应,但又不得不用,每次都是发现问题了手动重启,现在写个脚本定时检测进程是否正