网页菜单是 Web 开发中最基本的组件之一，它可以让用户快速地导航到网站的各个页面。在本文中，我们将介绍如何使用 jQuery 和 CSS 实现一个水平布局的多级网页菜单效果。
准备工作
在开始编写代码之前，我们需要准备以下工作：
- 一个 HTML 文件，用于放置菜单和菜单项。
- 一个 CSS 文件，用于定义样式。
- 一个 jQuery 库，用于操作 DOM 元素。
HTML 结构
我们的菜单将包含多个级别，每个级别都有一个标题和多个选项。因此，我们可以使用无序列表（<ul>）和列表项（<li>）来表示菜单结构，然后使用标题（<h1>、<h2> 等）来表示每个级别的名称。
下面是一个示例 HTML 结构：
-- -------------------- ---- -------
---- -------------
-------------
----
------ ------------ ----------
------ ------------ ----------
------ ------------ ----------
-----
-------------
----
------ ------------ ----------
------ ------------ ----------
------ ------------ ----------
-----
-------------
----
------ ------------ ----------
------ ------------ ----------
------ ------------ ----------
-----
------在这个示例中，我们使用了一个 menu 类来给菜单容器添加样式。
CSS 样式
下面是一个示例 CSS 样式，用于设置菜单的基本样式：
-- -------------------- ---- ------- ----- - ------ ----- ----------------- ----- ------ ----- ---------- ----- - ----- --- ----- --- ----- -- - ------- -- -------- ----- - ----- -- - ----------- ----- ------- -- -------- -- -------- ----- - ----- -- - ------------- ----- - ----- - - -------- ------ -------- ----- ------ ----- ---------------- ----- ----------- ---------------- ---- ------------ - ----- ------- - ----------------- ----- -
在这个示例中，我们设置了菜单的背景颜色、字体大小和颜色等基本样式。我们还使用了 Flexbox 布局来让列表项水平排列，并设置了菜单项的样式。
jQuery 代码
下面是一个示例 jQuery 代码，用于实现多级菜单的展开与折叠效果：
$(document).ready(function() {
$('.menu ul').hide();
$('.menu > h1, .menu > h2, .menu > h3').click(function() {
$(this).next('ul').slideToggle(200);
});
});在这个示例中，我们首先隐藏所有菜单的子菜单（$('.menu ul').hide()）。然后，当用户点击菜单标题时，使用 slideToggle() 方法来展开或折叠该级别的菜单项。
示例演示
您可以在 JSFiddle 上查看完整的示例演示。在这个演示中，您可以尝试添加新的菜单项、修改样式
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/4117