在前端开发中，导航菜单是一个非常基础且常见的组件，而二级导航菜单则是更加复杂的一种形式。本文将介绍如何使用 JavaScript 实现一个简单的二级导航菜单，并提供示例代码以供参考。
HTML 结构
首先，我们需要定义一个包含二级导航菜单的 HTML 结构。以下是一个示例：
-- -------------------- ---- -------
-----
--- ------------------
------ ----------------------
------ ------------------
--- -----------------
------ -------------------------
------ ----------------------
------ -------------------------
-----
-----
------ ---------------------
--- -----------------
------ ------------ ---------------
------ ---------------- ---------------
------ ---------------------
-----
-----
------ ----------------------
------ -------------------------
-----
------在这个示例中，我们使用了一个 nav 元素来表示整个导航菜单。菜单包含一个主菜单和两个子菜单（关于我们和服务）。每个菜单项都是一个 li 元素，而子菜单则是另一个嵌套的 ul 元素。
CSS 样式
接下来，我们需要为导航菜单定义一些基本的 CSS 样式。以下是一个示例：
-- -------------------- ---- ------- --- -- - ------- -- -------- -- ----------- ----- - --- -- - --------- --------- ------ ----- - --- -------- - -- - -------- ------ - --- - - -------- ------ -------- ---- ----- ---------------- ----- ------ ----- - --- ----------- - -------- ----- --------- --------- ---- ----- ----- -- ----------------- ----- ------- --- ----- ----- -------- ---- - --- ----------- -- - ------ ----- ------ ----- - --- ----------- - - -------- --- ----- ------ ----- - --- ----------- ------- - ----------------- -------- -
在这个示例中，我们定义了基本的样式，包括主菜单和子菜单的样式。当用户将鼠标悬停在主菜单上时，子菜单会显示出来。
JavaScript 实现
最后，我们需要编写一些 JavaScript 代码来实现二级导航菜单的功能。以下是一个示例：
-- -------------------- ---- -------
-- -------------
--- --------- - ------------------------------------- - -----
-- -----
--------------------------------------- -------------- -
-- -----
--- ------- - ----------------------------------
-- --------------
-- --------- -
--------------------- - -------
-- --------
----------------------------------- ---------- -
--------------------- - --------
---
-- --------
----------------------------------- ---------- -
--------------------- - -------
---
-
---在这个示例中，我们首先获取了所有含有子菜单的菜单项。然后，对于每个菜单项，我们获取它的子菜单，并将其初始设置为隐藏状态。接下来，我们添加了两个事件监听器，分别是当鼠
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2742