当前位置：首页 > 文章列表 > 文章 > 前端 > 响应式下拉菜单添加关闭按钮技巧

响应式下拉菜单添加关闭按钮技巧

2026-05-07 09:24:46 0浏览收藏

✅ 推荐方案：结构清晰 + 语义化 + 可维护

首先，将原依赖和相邻兄弟选择器（#toggle:checked + .f-cb）的隐式控制方式，改为使用语义化

? 提示：使用 aria-expanded 和 aria-hidden 属性提升可访问性，确保屏幕阅读器能正确播报菜单状态。

✅ CSS（响应式 + 动画友好）

.nav-box {
  position: relative;
}

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #433F3F;
  padding: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.dropdown-list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  background: white;
  box-shadow: 5px 16px 16px 8px rgba(0,0,0,0.15);
  border-radius: 4px;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  z-index: 1000;
  display: none; /* 初始隐藏 */
  flex-direction: column;
}

.close-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 8px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #777;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: #f5f5f5;
}

/* 移动端启用菜单交互 */
@media (max-width: 1205px) {
  .hamburger-btn {
    display: block;
  }

  .dropdown-list[aria-hidden="false"] {
    display: flex;
  }
}

✅ JavaScript（轻量、无依赖、状态同步）

const toggleBtn = document.getElementById('menu-toggle');
const closeBtn = document.getElementById('menu-close');
const dropdown = document.getElementById('dropdown-menu');

// 点击汉堡 → 显示菜单
toggleBtn.addEventListener('click', () => {
  dropdown.setAttribute('aria-hidden', 'false');
  toggleBtn.setAttribute('aria-expanded', 'true');
  dropdown.style.display = 'flex';
});

// 点击 × → 隐藏菜单
closeBtn.addEventListener('click', () => {
  dropdown.setAttribute('aria-hidden', 'true');
  toggleBtn.setAttribute('aria-expanded', 'false');
  dropdown.style.display = 'none';
});

// 【增强体验】点击菜单外部区域自动关闭
document.addEventListener('click', (e) => {
  const isClickInside = dropdown.contains(e.target) || toggleBtn.contains(e.target);
  if (!isClickInside && dropdown.getAttribute('aria-hidden') === 'false') {
    dropdown.setAttribute('aria-hidden', 'true');
    toggleBtn.setAttribute('aria-expanded', 'false');
    dropdown.style.display = 'none';
  }
});

⚠️ 注意事项与最佳实践

避免内联样式污染：虽然示例中使用 style.display 快速控制显隐，但生产环境建议通过切换 CSS 类（如 .is-open）来管理状态，便于统一动画（如 transition: max-height 或 opacity）。
移动端触摸反馈：为 .hamburger-btn 和 .close-btn 添加 touch-action: manipulation 可提升 iOS 点击响应速度。
键盘可访问性：支持 Esc 键关闭菜单（可在 JS 中监听 keydown 事件判断 event.key === 'Escape'）。
性能提示：若菜单项较多，建议对 display: flex 切换做防抖或节流处理（本例无需）。

通过以上重构，你不仅获得了一个带“×”关闭按钮的响应式下拉菜单，更建立了一套可扩展、可测试、符合现代 Web 标准的交互模式。无需框架，仅需 30 行核心代码，即可交付专业级用户体验。

以上就是《响应式下拉菜单添加关闭按钮技巧》的详细内容，更多关于的资料请关注golang学习网公众号！