在前端开发中，经常会用到一些能够快速实现常用功能的npm包，今天我们来介绍一个这样的包——yr-gmenu，它能够帮助你快速实现一个响应式的“折叠式”菜单，让你的网页看起来更为整洁和美观。
安装
在使用yr-gmenu之前，我们需要先安装它。使用以下命令：
npm install yr-gmenu --save
使用
安装成功之后，我们可以通过以下的方式来使用yr-gmenu：
import YrGmenu from 'yr-gmenu'
const gmenu = new YrGmenu(document.querySelector('.menu'))
gmenu.init()其中，'.menu'是我们要实现菜单效果的HTML元素的选择器。
通过以上代码，你就可以在你的网页中实现一个简单的折叠菜单了。
深入
当然，yr-gmenu 还认识更多的属性和方法，这让它变得更加强大和灵活。下面，我们一起来认识一下：
初始化选项
我们可以通过修改 YrGmenu 的构造函数中的参数，来改变一些菜单的默认行为。
-- -------------------- ---- -------
----- ----- - --- --------
--------------------------------
-
----------------- -----
---------------- ---------
------------ --------
-
-
------------其中，openAllByDefault 表示是否默认展开菜单，默认值为false；
activeItemClass 表示当前活动菜单项的class名，默认为 'active';
parentClass 表示具有子菜单的菜单项的class名，默认为 'parent'；
方法
除了构造函数中的选项之外，yr-gmenu还支持以下的方法：
open()
展开具有指定子菜单的菜单项，第一个参数为菜单项的索引值。
gmenu.open(1)
close()
关闭具有指定子菜单的菜单项，第一个参数为菜单项的索引值。
gmenu.close(1)
toggle()
切换指定菜单项子菜单的展开与关闭状态，第一个参数为菜单项的索引值。
gmenu.toggle(1)
示例代码
下面是一个使用yr-gmenu实现简单折叠菜单的示例代码。
HTML:
-- -------------------- ---- -------
---- -------------
----
----
---
----
---------------
---------------
-----
-----
----
---
----
----
------
----
-----------------
-----------------
-----
-----
------------
-----
-----
------------
-----
------JS:
import YrGmenu from 'yr-gmenu'
const gmenu = new YrGmenu(document.querySelector('.menu'))
gmenu.init()CSS:
-- -------------------- ---- ------- ----- -- -- - ------------ ----- -------- ----- - ----- -- --------- - -- - -------- ------ - ----- -- --------- - ------- -------- -
通过参考以上示例，你可以实现一个具有折叠功能的菜单，希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb681e8991b448da35d