用html+js下拉菜单的demo，当鼠标点击后展开，鼠标点击别的地方后折叠

大家好，我是1024小神，技术群 / 私活群 / 股票群或交朋友都可以私信我。
如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~
使用html + js实现下拉菜单demo，因为copy的网站菜单功能失效，就需要自己写一个逻辑，点击其他区域折叠菜单，可以参考：
html 复制代码
<!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>
如果你有好的想法或需求，可以私信我，我这里有很多程序员朋友可以帮你实现你的想法。