写一个折叠菜单的html代码
以下是一个简单的折叠菜单的 HTML 代码示例：
<!DOCTYPE html>
<html>
<head>
<title>折叠菜单</title>
<style>
/* 隐藏子菜单 */
.sub-menu {
display: none;
}
/* 显示子菜单 */
.menu-item.active .sub-menu {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link">菜单项 1</a>
<ul class="sub-menu">
<li><a href="#">子菜单项 1.1</a></li>
<li><a href="#">子菜单项 1.2</a></li>
<li><a href="#">子菜单项 1.3</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#" class="menu-link">菜单项 2</a>
<ul class="sub-menu">
<li><a href="#">子菜单项 2.1</a></li>
<li><a href="#">子菜单项 2.2</a></li>
<li><a href="#">子菜单项 2.3</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#" class="menu-link">菜单项 3</a>
<ul class="sub-menu">
<li><a href="#">子菜单项 3.1</a></li>
<li><a href="#">子菜单项 3.2</a></li>
<li><a href="#">子菜单项 3.3</a></li>
</ul>
</li>
</ul>
<script>
// 点击菜单项，切换子菜单的显示状态
var menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(item) {
item.addEventListener('click', function() {
this.classList.toggle('active');
});
});
</script>
</body>
</html>
这个折叠菜单有三个菜单项和每个菜单项下面有三个子菜单项。在默认情况下，子菜单是隐藏的，但是当点击菜单项时，它会切换子菜单的显示状态。CSS 中的 .sub-menu 类设置了子菜单的初始状态，并且当菜单项的 .active 类被添加时，它会将子菜单显示出来。JavaScript 中的代码监听了菜单项的点击事件，并在菜单项上添加或删除 .active 类来控制子菜单的显示状态。
原文地址: http://www.cveoy.top/t/topic/bLFU 著作权归作者所有。请勿转载和采集!