本文介绍如何使用 npm 包中的 dropdown.js 插件来创建自定义下拉菜单。该插件使用原生 JavaScript 编写，没有依赖任何其他库。
安装
首先，打开命令行窗口并导航到项目目录。然后，使用以下命令安装 dropdown.js：
npm install dropdown.js
基本用法
在 HTML 文件中添加一个下拉菜单按钮和一个下拉菜单容器。将 data-dropdown-target 属性设置为下拉菜单容器的 ID。
<button data-dropdown>下拉菜单</button> <div id="myDropdown" class="dropdown-content"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </div>
接下来，在 JavaScript 文件中引入 dropdown.js 并初始化下拉菜单：
import Dropdown from 'dropdown.js';
const dropdown = new Dropdown('[data-dropdown]');现在，您的下拉菜单应该可以正常工作了！
自定义选项
dropdown.js 具有许多可自定义的选项。以下是一些可用选项的示例：
-- -------------------- ---- -------
----- -------- - --- --------------------------- -
------------ ---------
------------- --------------------------
------- ---------- -
-----------------------
--
------- ---------- -
-----------------------
-
---您可以在代码中设置以下选项：
toggleClass：下拉菜单按钮的类名，默认为"active"。contentClass：下拉菜单容器的类名，默认为"dropdown-content"。onShow：下拉菜单显示时调用的回调函数。onHide：下拉菜单隐藏时调用的回调函数。
深度学习
使用 dropdown.js 可以帮助您深入了解以下主题：
- 模块化 JavaScript：dropdown.js 是一个模块化的 npm 包，它演示了如何将代码拆分成可重用的模块。
- 原生 DOM 操作：dropdown.js 不依赖任何其他库，因此它展示了如何使用原生的 DOM API 来构建交互式组件。
- 事件处理程序：dropdown.js 使用事件处理程序来响应用户交互。这是构建 Web 应用程序的核心概念之一。
指导意义
通过学习和使用 dropdown.js，您将更加熟练地掌握以下技能：
- 如何使用 npm 包和 ES6 模块加载器。
- 如何创建可重用的 JavaScript 组件。
- 如何在 JavaScript 中操作 DOM 元素。
- 如何使用事件处理程序来管理用户交互。
示例代码
请参考以下示例代码，了解如何在页面上创建自定义下拉菜单：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ----------
-------
----------------- -
-------- -----
--------- ---------
-------- --
-
----------------- - -
-------- ------
-------- -----
----------------- --------
------ ------
---------------- -----
-
----------------- ------- -
----------------- -----
-
---------------------------------------- -
-------- ------
-
--------
-------
------
------- ---------------------------
---- --------------- -------------------------
-- ----------------
-- ----------------
-- ----------------
------
------- --------------
------ -------- ---- ----------------------------------------------------------------
----- -------- - --- ---------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------