<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>折叠菜单示例</title>
<style>
.menu { width: 300px; }
.menu-items { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.menu-items.open { max-height: 300px; } /* 根据菜单项的数量调整 */
a{color: blue/*链接文字颜色*/;text-decoration: none;}/*去除链接下划线*/
</style>
</head>
<body>
<div class="menu">
<button class="menu-toggle"> 菜单 </button>
<div class="menu-items">
<a href="#" class="menu-item">网站首页</a>
<a href="#" class="menu-item">关于我们</a>
<a href="#" class="menu-item">我们的服务</a>
<a href="#" class="menu-item">联系方式</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const menuItems = document.querySelector('.menu-items');
menuToggle.addEventListener('click', function() {
menuItems.classList.toggle('open');
});
});
</script>
</body>
</html>
