原生JS模仿QQ阅读点击展开折叠效果

利用JS技术实现QQ阅读的相似点击扩展和折叠效果，具体内容如下

1.定义展开函数showdiv()，并单击“全文”按钮展开全文。

1.单击扩展函数，并传入触发单击事件的按钮作为参数。2.通过传入按钮找到其父元素，并将其父元素设置为隐藏。3.将元素设置在其父元素之后立即显示。

其次，定义fold函数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；padd : 0；font-size : 9 pt；线高：180%；} # pn { background : # F8 F8；height: auto宽度： 750 px；margin: 0 autopadding: 5px} .artTitle { font-weight : bold；color: # 3030FFfont-size : 11pt；} .字幕{ color: # CCC} .内容{ border: 1px固体# CCCdisplay:无；padding: 5px} .btm { text-align : right；height: 30px} .btn { width: 80pxheight: 20pxpadding: 5px 3px 5px 3px文本对齐：中心；文本装饰：无；背景技术： # f0f 0；border: 1px固体# CCC}/style script type=' text/JavaScript '//display函数show div(obj){ var x=obj . parent node；var y=x.nextSiblingwhile(y.nodeType！=1){ y=y . next sibling；} x . style . display=“none”；y . style . display=' block '；}//隐藏函数函数hide div(obj){ var x=obj . parent node . parent node；var y=x.previousSiblingwhile(y.nodeType！=1){ y=y . previoussible；} x . style . display=“none”；y . style . display=' block '；}/script/headsdydiv id=' pn ' div id=' art0 ' p class=' arttitle ' slack:团队日常沟通协作工具的模型/p p class=' title '作者：发表于互联网：2014年3月1日/p p现在可以申请成为Slack.com的试用用户，这是一款面向企业和团队的协作工具。Slack基本符合我对团队沟通工具的完整要求。特点是：可以在所有端进行，也就是桌面端，包括Mac OS和Windows系统；网页端是浏览器；移动支持包括iOS和安卓。同时，移动终端有很好的体验来满足移动办公的便利性。关注核心行为，即‘发布消息’。团队成员只需要做一个基本行为。发行a.a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick=' JavaScript 3360 show div(this)；'展开全文/a/p div class='content' p现在您可以申请成为Slack.com上的试用用户，这是一个面向企业和团队的协作工具。好像需要试试企业域名后缀的邮件地址。Slack基本符合我对团队沟通工具的完整要求。特点如下：/p p pFocus在核心行为上，即“发布一条消息”，团队成员只需要做一个基本行为。/p p发布消息可以扩展到图片或文件等。这样可以更好地进行协作，如果能快速预览文件就更好了。/p p pSupport @直接与单个团队成员交流，其他成员可以看到并参与。/p p pUse #以快速形成主题组或项目组。/p p良好的搜索支持。虽然这些是Slack的特点，但也是我对团队日常协作工具的要求。显然，Slack完全符合这些要求，产品也很好用。这些需求其实就是我对“移动、社交、云存储”的理解，这三个因素基本上会改写很多软件和应用。/p pSlack有一个免费的lite版本，但收费版本似乎对中国用户来说价格略高。/p pSlack是我最喜欢的项目Flickr的创始人TinySpeck创立的，所以有很好的基础。而且从目前来看，基本上会成为非常成功的应用，所以产品的可持续发展应该没有问题。

/p p post Slack:团队日常沟通和协作工具的模型。/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/HR/div id=' art1 ' p class=' arttitle ' slack:团队日常沟通协作工具模型/p p class='subTitle '作者：从网上发布：2014年3月1日/p p现在可以申请成为Slack.com的试用用户了，是企业和团队的协作工具。Slack基本符合我对团队沟通工具的完整要求。特点是：可以在所有端进行，也就是桌面端，包括Mac OS和Windows系统；网页端是浏览器；移动支持包括iOS和安卓。同时，移动终端有很好的体验来满足移动办公的便利性。关注核心行为，即‘发布消息’。团队成员只需要做一个基本行为。发行a.a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick=' JavaScript 3360 show div(this)；'展开全文/a/p div class='content' p现在您可以申请成为Slack.com上的试用用户，这是一个面向企业和团队的协作工具。好像需要试试企业域名后缀的邮件地址。Slack基本符合我对团队沟通工具的完整要求。特点如下：/p p可以在所有端执行，即桌面端，包括Mac OS和Windows系统；网页端是浏览器；移动支持包括iOS和安卓。/p p同时，移动终端拥有良好的体验，满足移动办公的便利性。/p p p关注核心行为，即“发布消息”。团队成员只需要做一个基本行为。/p p发布消息可以扩展到图片或文件等。这样可以更好地进行协作，如果能快速预览文件就更好了。/p p pSupport @直接与单个团队成员交流，其他成员可以看到并参与。/p p post Slack:团队日常沟通和协作工具的模型。/p Div class=' btm ' a href=' # Rel=' external nofollow ' Rel=' external nofollow ' Rel=' external nofollow ' Rel=' external nofollow ' class=' BTN ' onclick=' hide Div(this)' fold全文/a/Div/Div/Div/body/html以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。