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

前端之家收集整理的这篇文章主要介绍了原生JS仿QQ阅读点击展开、收起效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、定义展开函数

showdiv(),

实现点击"全文"按钮,全文展开。

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

二、定义收起函数

hidediv(),

实现点击"收起全文"按钮,全文内容隐藏。

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

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

效果如图:

代码:

Meta charset="UTF-8">