trowel-collapses 是一个针对前端开发中经常出现的信息折叠需求的 npm 包。在页面中，我们经常需要做出折叠不同的部分或者模块，trowel-collapses.提供了非常简单易用的方式来实现这个效果。
安装 trowel-collapses
要使用 trowel-collapses，需要先在项目中安装它。可以使用 npm 命令行工具将其安装到你的项目中：
npm install trowel-collapses --save
安装成功后，在你的项目中引入 trowel-collapses 可以使用如下命令：
import trowelCollapses from 'trowel-collapses';
使用 trowel-collapses
trowel-collapses 的使用非常简单，只需要选择需要折叠的元素即可。以下是使用 trowel-collapses 的步骤：
- 在 HTML 中创建需要折叠的元素，并给它们添加一个 class，例如
collapsible。 - 在 JavaScript 中选择并实例化需要折叠的元素：
const collapsibles = document.querySelectorAll('.collapsible');
const options = {
accordion: false,
};
const collapsibleInstance = trowelCollapses.init(collapsibles, options);trowel-collapses 配置项
trowel-collapses 包含有一些可配置项来方便你实现更多样的折叠效果。以下是可配置项列表：
| 配置项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| accordion | boolean | 是否开启手风琴效果，即同一时间只允许一个可折叠内容展开 | false |
| onOpenStart | function | 可折叠内容展开时的回调函数 | null |
| onOpenEnd | function | 可折叠内容展开后的回调函数 | null |
| onCloseStart | function | 可折叠内容关闭时的回调函数 | null |
| onCloseEnd | function | 可折叠内容关闭后的回调函数 | null |
在创建 trowel-collapses 实例的时候可以传递一个配置对象作为第二个参数，例如：
-- -------------------- ---- -------
----- ------- - -
---------- -----
------------ ------------ -
----------------- ------- ----
--
---------- ------------ -
----------------- ------- ----
--
------------- ------------ -
------------------ ------- ----
--
----------- ------------ -
------------------ ------- ----
--
--
----- ------------------- - ---------------------------------- ---------示例代码
以下是一个完整的、基于 trowel-collapses 的示例代码。在页面中创建带有 collapsible 类的元素，trowel-collapses 就会自动将其转化为可折叠内容。
-- -------------------- ---- -------
--------- -----
------
------
----------------------- ----------
-------
------
---- ------------------- -----------------------------
---- -------------------------
---- ----------------------------- -------
---- -------------------------
------- - -------
------
------
---- -------------------------
---- ----------------------------- -------
---- -------------------------
------- - -------
------
------
---- -------------------------
---- ----------------------------- -------
---- -------------------------
------- - -------
------
------
------
------- --------------------------------------------------------------------
--------
----- ------------ - ------------------------------------------
----- ------- - -
---------- -----
--
----- ------------------- - ---------------------------------- ---------
---------
-------
-------总结
trowel-collapses 是一个非常实用、易用的 npm 包，可以帮助开发者快速实现常见的信息折叠效果。通过了解本篇文章，希望能够让大家更好地使用 trowel-collapses，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b881e8991b448df01c