HTML中如何设置折叠菜单的展开与收起？

二、CSS 样式

接下来，我们需要使用 CSS 来样式化折叠菜单。以下是一些基本的 CSS 样式示例：

```css

.collapsible-menu {

background-color: #f1f1f1;

padding: 10px;

}

.collapsible {

cursor: pointer;

padding: 12px;

width: 100%;

border: none;

text-align: left;

outline: none;

font-size: 16px;

transition: 0.4s;

}

.active,

.collapsible:hover {

background-color: #ddd;

}

.content {

padding: 0 18px;

max-height: 0;

overflow: hidden;

transition: max-height 0.2s ease-out;

background-color: #f1f1f1;

}

```

在上述代码中，我们为 `.collapsible-menu` 类设置了一个背景颜色和内边距。为 `.collapsible` 类设置了鼠标指针样式、内边距、宽度、边框、文本对齐、轮廓、字体大小和过渡效果。当 `.collapsible` 类处于活动状态或鼠标悬停时，背景颜色会变为灰色。为 `.content` 类设置了内边距、最大高度、溢出隐藏和过渡效果，以实现内容的展开和收起效果。

三、JavaScript 脚本

我们需要使用 JavaScript 来实现折叠菜单的展开与收起功能。以下是一个简单的 JavaScript 脚本示例：

```html

```

在上述代码中，我们使用 `getElementsByClassName` 方法获取所有具有 `collapsible` 类的元素。然后，我们使用 `addEventListener` 方法为每个元素添加一个点击事件监听器。当点击一个菜单项时，我们使用 `classList.toggle` 方法来切换 `active` 类。然后，我们获取当前菜单项的下一个兄弟元素（即内容部分），并根据其当前的最大高度来决定是展开还是收起内容。如果内容部分的最大高度为 `null`，则表示内容处于收起状态，我们将其最大高度设置为内容的实际高度；如果内容部分的最大高度不为 `null`，则表示内容处于展开状态，我们将其最大高度设置为 `null`，以实现收起效果。

四、完整示例

以下是一个完整的 HTML 示例，包含了上述的 HTML 结构、CSS 样式和 JavaScript 脚本：

```html