在前端开发中，我们经常需要实现一些交互效果，其中展开和收起是比较常见的一种。本文将介绍如何使用原生JavaScript实现仿QQ阅读的点击展开、收起效果。
实现思路
该效果的实现思路比较简单：通过JavaScript获取要展开、收起的元素，并为其添加点击事件。当点击展开时，将元素的高度设置为实际高度；当点击收起时，将元素的高度设置为指定的初始高度。
代码实现
首先，我们需要有一个HTML结构来演示该效果：
-- -------------------- ---- -------
---- ----------------
-------------
---- ----------------
---
----
----
---
----
----
---
----
----
---
----
----
------
-- -------- ---------------------
------其中，.article是整个文章的容器，.content是要展开、收起的元素，.toggle是用于触发展开、收起操作的链接。为了方便演示，我们将.content元素的高度设置为100px：
.content {
height: 100px;
overflow: hidden;
}接下来，我们就可以使用JavaScript实现该效果了。代码如下：
-- -------------------- ---- -------
-- -------------------
--- ------- - -----------------------------------
--- ------ - ----------------------------------
-- --------------
-------------------------------- ---------- -
-- --------------------- --- -------- -
-- --
-------------------- - -------
---------------- - -----
- ---- -
-- --
-------------------- - --------
---------------- - -----
-
---在代码中，我们使用document.querySelector方法获取要展开、收起的元素和触发操作的链接，并添加了一个点击事件。当点击链接时，如果.content元素的高度为100px，则将其展开，否则将其收起。同时，修改链接的文本以反映当前状态。
总结
本文介绍了如何使用原生JavaScript实现仿QQ阅读的点击展开、收起效果。通过本文的示例，读者可以了解到如何使用JavaScript获取元素并为其添加事件监听器，以及如何动态修改元素的样式。这些知识点对于前端开发都是非常基础且重要的，读者可以在实际开发中加以运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1285