下拉菜单
下拉菜单是导航特效的入门款：默认只显示一级菜单，悬停或点击“产品”时展开二级面板。CSS :hover 版零 JS 但移动端不友好；JS click 版稳定可控，配合 aria-expanded 兼顾可访问性。
进阶：展开/收起加 max-height 或 opacity 过渡；移出整个菜单区域才收起（用 mouseleave 挂在父级而非按钮上）；移动端改成点击展开。
- 点击版逻辑：toggle .open 类 + aria-expanded 同步
- 收起时机：点页面空白处（document click）或移出父容器
- max-height 过渡比 height:auto 好处理（auto 不能过渡）
HTML
<style> .nav { display: flex; gap: 8px; justify-content: center; padding: 24px 0; font-family: "Microsoft YaHei", sans-serif; } .nav .item { position: relative; } .nav .btn { padding: 10px 20px; border: none; border-radius: 8px; background: #f0e6ff; color: #333; cursor: pointer; font-size: 14px; } .nav .btn[aria-expanded="true"] { background: #d2a8ff; color: #fff; } .menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s ease; } .menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .menu a { display: block; padding: 9px 14px; border-radius: 6px; color: #333; text-decoration: none; font-size: 14px; } .menu a:hover { background: #f0e6ff; } </style> <div class="nav"> <div class="item"><button class="btn">首页</button></div> <div class="item"> <button class="btn" aria-expanded="false">产品 ▾</button> <div class="menu"> <a href="#">产品 A</a><a href="#">产品 B</a><a href="#">产品 C</a> </div> </div> <div class="item"><button class="btn">关于</button></div> </div> <script> document.querySelectorAll('.nav .item').forEach(function (item) { var btn = item.querySelector('.btn[aria-expanded]'); if (!btn) return; var menu = item.querySelector('.menu'); btn.addEventListener('click', function (e) { e.stopPropagation(); var open = menu.classList.toggle('open'); btn.setAttribute('aria-expanded', open); }); }); document.addEventListener('click', function () { // 点空白收起 document.querySelectorAll('.menu.open').forEach(function (m) { m.classList.remove('open'); m.parentNode.querySelector('.btn').setAttribute('aria-expanded', 'false'); }); }); </script>
本节要点下拉菜单 = toggle .open + 空白点击收起 + max-height/opacity 过渡；aria-expanded 照顾无障碍。
