在Web开发中，交互效果的实现是非常重要的一环。wezom-toggler 是一个npm包，为开发者提供了一个简单而灵活的 DOM 元素显示/隐藏交互组件。在本文中，将介绍如何使用 wezom-toggler 包，并结合代码示例加深理解。
安装
使用npm安装 wezom-toggler，打开终端，输入以下命令：
npm install wezom-toggler --save
在这个过程中，wezom-toggler 的所有依赖包也将被安装。
使用
引入 wezom-toggler
在 HTML 文件中，可以使用 script 标签来引入wezom-toggler:
<script src="node_modules/wezom-toggler/index.js"></script>
当然，也可以通过ES6引入方式，如下：
import Toggler from 'wezom-toggler';
基本用法
var toggler = new Toggler({
toggleers: '.js-toggler',
targets: '.js-target',
activeClass: 'is-active'
});使用上述代码，页面所有含有 .js-toggler 类名的元素将被绑定 click 事件，被点击时，元素中含有 .js-target 类名的元素将会在显示和隐藏之间切换。
选项
toggleers(string)
选项中包含的 .js-toggler 类名用于绑定选中元素的点击事件。
targets(string)
选项中包含的 .js-target 类名用于目标元素的选择器。
activeClass(string)
选项中包含的类名用于切换目标元素的显示和隐藏状态。默认为 is-active。
startActive(boolean)
选项中包含此项，则指定默认是否为激活状态，可以为 true 或 false。默认为 false。
multiple(boolean)
若设置 multiple 项则可以同时对多个目标元素进行操作。默认为 false。
有关更多选项内容，请参考 wezom-toggler 的官方文档。
示例代码
-- -------------------- ---- -------
------- ---------------------------- ----------------
---- ---------------------- -- --- --------------
------- ---------------------------------------------------
--------
--- ------- - --- ---------
---------- --------------
-------- -------------
------------ -----------
---
---------结论
在本文中，我们介绍了 npm 包 wezom-toggler 的安装方法和基本用法，并详细描述了其选项，包括 toggleers、targets、activeClass、startActive 和 multiple。通过示例代码，读者可以更好地理解如何使用 wezom-toggler 在页面中实现元素状态的交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd3d0