在前端开发中，我们常常需要控制某些组件或界面的显示与隐藏。这种需求可以通过手动控制元素的 CSS 属性，也可以通过使用特定的 JavaScript 插件实现。toggling 就是这样一款简单但实用的 npm 包，它可以帮助我们快速实现元素的显示与隐藏。
安装
toggling 可以通过 npm 安装：
npm install toggling
使用方法
toggling 的使用方法非常简单，只需要引用插件并指定需要控制的元素即可。
首先，我们需要在 HTML 文件中定义需要控制的元素，比如：
<div class="toggle-me">Hello, world!</div>
接下来，我们需要在 JavaScript 文件中引用 toggling 并指定要控制的元素：
const toggle = require('toggling');
const element = document.querySelector('.toggle-me');
const toggleButton = document.querySelector('#toggle-button');
toggle(element, toggleButton);这段代码的作用是为按钮 toggleButton 绑定一个点击事件，在点击按钮时切换元素的显示状态。需要注意的是，按钮的 id 必须与元素的 class 相对应。
高级用法
toggling 同时支持一些高级用法，比如：
1. 自定义显示/隐藏样式
我们可以通过传递第三个参数来自定义元素的显示/隐藏样式。比如，我们想让元素在隐藏时切换为灰色：
toggle(element, toggleButton, {
display: 'none',
background: '#ccc'
});2. 多元素控制
我们可以传递一个数组来控制多个元素。比如，我们想同时控制两个元素的显示/隐藏：
<div class="toggle-me">Hello</div> <div class="toggle-me">World</div>
const elements = document.querySelectorAll('.toggle-me');
const toggleButton = document.querySelector('#toggle-button');
toggle(elements, toggleButton);3. 回调函数
我们可以传递一个回调函数来控制切换时的其他效果，比如动画。比如，我们想让元素在切换时淡入淡出：
toggle(elements, toggleButton, {
display: 'none',
opacity: 0
}, (element) => {
element.style.transition = 'opacity 0.5s';
element.style.opacity = 1;
});示例代码
完整的使用示例可以参考以下代码：
-- -------------------- ---- -------
---- - ---- ------------ ---
---- ------------------------ ------------
---- - ---------- ----- -------- --------- ---
------- ----------------------------------
--------
----- ------ - --------------------
----- ------- - -------------------------------------
----- ------------ - -----------------------------------------
-- ----------------
--------------- --------------
-- --------------
--------------- ------------- -
-------- -------
----------- ------
---
-- ----------
----- -------- - ----------------------------------------
---------------- --------------
-- --------
--------------- ------------- -
-------- -------
-------- -
-- --------- -- -
------------------------ - -------- ------
--------------------- - --
---
---------总结
toggling 是一款非常实用的 npm 包，可以帮助我们快速实现元素的显示与隐藏。它的使用方法非常简单，同时也支持一些高级用法，能够满足我们日常开发中的多样化需求。希望这篇文章能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574881e8991b448d4406