用html+js下拉菜单的demo，当鼠标点击后展开，鼠标点击别的地方后折叠
使用html + js实现下拉菜单demo，因为copy的网站菜单功能失效，就需要自己写一个逻辑，点击其他区域折叠菜单，可以参考：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>折叠菜单 Demo</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 100vh;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);padding: 20px;}.container {width: 100%;max-width: 800px;text-align: center;}h1 {color: #2c3e50;margin-bottom: 30px;font-size: 2.5rem;text-shadow: 1px 1px 2px rgba(0,0,0,0.1);}.menu-container {background: white;border-radius: 10px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);overflow: hidden;margin-bottom: 30px;}.menu-item {border-bottom: 1px solid #eee;}.menu-item:last-child {border-bottom: none;}.menu-header {padding: 18px 20px;background: #3498db;color: white;cursor: pointer;display: flex;justify-content: space-between;align-items: center;transition: background 0.3s ease;}.menu-header:hover {background: #2980b9;}.menu-header.active {background: #2980b9;}.menu-content {padding: 0;background: #f8f9fa;max-height: 0;overflow: hidden;transition: max-height 0.4s ease, padding 0.4s ease;}.menu-content.active {max-height: 300px;padding: 20px;}.menu-content p {color: #555;line-height: 1.6;text-align: left;}.arrow {transition: transform 0.3s ease;}.arrow.active {transform: rotate(180deg);}.instructions {background: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);margin-top: 20px;}.instructions h2 {color: #2c3e50;margin-bottom: 15px;}.instructions p {color: #555;line-height: 1.6;margin-bottom: 10px;}.highlight {background: #ffeaa7;padding: 2px 5px;border-radius: 3px;font-weight: 500;}</style>
</head>
<body><div class="container"><h1>折叠菜单 Demo</h1><div class="menu-container"><div class="menu-item"><div class="menu-header"><span>前端技术</span><span class="arrow">▼</span></div><div class="menu-content"><p>HTML、CSS 和 JavaScript 是现代前端开发的三大核心技术。HTML提供页面结构，CSS负责样式表现，JavaScript实现交互功能。近年来，前端框架如React、Vue和Angular极大地提高了开发效率。</p></div></div><div class="menu-item"><div class="menu-header"><span>后端开发</span><span class="arrow">▼</span></div><div class="menu-content"><p>后端开发主要涉及服务器、应用程序和数据库的交互。常见的后端语言包括Java、Python、PHP、Ruby和Node.js。后端开发需要关注数据存储、API设计、安全性和性能优化等方面。</p></div></div><div class="menu-item"><div class="menu-header"><span>移动开发</span><span class="arrow">▼</span></div><div class="menu-content"><p>移动应用开发主要有原生开发（iOS和Android）和跨平台开发（React Native、Flutter等）两种方式。移动开发需要特别考虑不同设备的屏幕尺寸、性能限制和用户体验。</p></div></div></div><div class="instructions"><h2>使用说明</h2><p>1. 点击<span class="highlight">菜单标题</span>可以展开或折叠内容</p><p>2. 点击<span class="highlight">页面其他区域</span>可以折叠所有已展开的菜单</p><p>3. 菜单展开时会有平滑的动画效果</p></div></div><script>document.addEventListener('DOMContentLoaded', function() {const menuHeaders = document.querySelectorAll('.menu-header');const menuContents = document.querySelectorAll('.menu-content');const arrows = document.querySelectorAll('.arrow');// 点击菜单标题的处理函数function toggleMenu(index) {// 切换当前菜单的激活状态const isActive = menuContents[index].classList.contains('active');// 关闭所有菜单menuContents.forEach(content => content.classList.remove('active'));menuHeaders.forEach(header => header.classList.remove('active'));arrows.forEach(arrow => arrow.classList.remove('active'));// 如果当前菜单原本不是激活状态，则激活它if (!isActive) {menuContents[index].classList.add('active');menuHeaders[index].classList.add('active');arrows[index].classList.add('active');}}// 为每个菜单标题添加点击事件menuHeaders.forEach((header, index) => {header.addEventListener('click', function(e) {e.stopPropagation(); // 阻止事件冒泡toggleMenu(index);});});// 点击页面其他区域时关闭所有菜单document.addEventListener('click', function() {menuContents.forEach(content => content.classList.remove('active'));menuHeaders.forEach(header => header.classList.remove('active'));arrows.forEach(arrow => arrow.classList.remove('active'));});// 阻止菜单内容区域的点击事件冒泡menuContents.forEach(content => {content.addEventListener('click', function(e) {e.stopPropagation();});});});</script>
</body>
</html>