栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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

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

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

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

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

效果如图:

具体代码:




 
 
 
 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;
 }
 
 



 
 

Slack:团队日常沟通协作工具典范

作者:来自网络 发表时间:2014-3-1

现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下: 在所有端都可以进行,即桌面端,包括Mac OS和Windows系统;web端即浏览器;移动端的支持包括iOS和Android。 同时,移动端是有良好体验以满足移动办公便利性的。 聚焦核心行为,即"发布一条信息",团队成员只需要做一个这个基本行为即可。 发布一条... 展开全文

现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:

聚焦核心行为,即“发布一条信息”,团队成员只需要做一个这个基本行为即可。

发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等,以便协作更好进行,如果文件能快速预览则更好。

支持@方式直接和单个团队成员沟通,并且能够被其他成员看到和参与进来。

以#来进行快速形成话题组或者项目组。

良好的搜索支持。 上述虽然是Slack的特性,也是我对团队日常协作工具的要求——显然,Slack完全符合这些要求,而且产品做得很易用。这些要求其实就是我对“移动、社交、云端存储”的理解,这三个因素基本会重写很多软件和应用。

Slack有免费的lite版本,但收费版本似乎价格对中文用户而言略高。

Slack由我很喜欢的项目Flickr的创始人新公司TinySpeck创办,因此基础甚好。而且从目前看,基本上会成为一个很成功的应用,所以在产品持续发展上面应该毫无问题。

The post Slack:团队日常沟通协作工具典范 appeared first on 游山打猎.

收起全文

Slack:团队日常沟通协作工具典范

作者:来自网络 发表时间:2014-3-1

现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下: 在所有端都可以进行,即桌面端,包括Mac OS和Windows系统;web端即浏览器;移动端的支持包括iOS和Android。 同时,移动端是有良好体验以满足移动办公便利性的。 聚焦核心行为,即"发布一条信息",团队成员只需要做一个这个基本行为即可。 发布一条... 展开全文

现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:

在所有端都可以进行,即桌面端,包括Mac OS和Windows系统;web端即浏览器;移动端的支持包括iOS和Android。

同时,移动端是有良好体验以满足移动办公便利性的。

聚焦核心行为,即“发布一条信息”,团队成员只需要做一个这个基本行为即可。

发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等,以便协作更好进行,如果文件能快速预览则更好。

支持@方式直接和单个团队成员沟通,并且能够被其他成员看到和参与进来。

The post Slack:团队日常沟通协作工具典范 appeared first on 游山打猎.

收起全文

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/89357.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号