如何实现点击触发替代hover触发的下拉菜单功能

以下两种方案都可以替换原有hover触发逻辑，你可以根据项目情况选择：

方案1：纯CSS无JS实现 #

适合纯静态页面场景，不需要编写JavaScript代码，原理是通过隐藏复选框的选中状态控制菜单显隐：

• 给网格图标外层套label标签，关联一个隐藏的type="checkbox"输入框
• 将原有CSS中:hover触发下拉显隐的规则，替换为匹配复选框选中状态的选择器
• 新增全屏透明遮罩层，实现点击空白区域自动关闭菜单的效果

示例代码：

<!-- 页面结构调整 -->
<input type="checkbox" id="menu-toggle" class="menu-toggle">
<label for="menu-toggle" class="grid-icon">
  <!-- 原有网格图标代码放在这里 -->
</label>
<label for="menu-toggle" class="close-overlay"></label>
<ul class="dropdown">
  <!-- 原有下拉菜单内容保留 -->
</ul>

/* 样式调整 */
.menu-toggle {
  display: none;
}
.dropdown {
  display: none;
  /* 原有下拉菜单的定位、样式等规则全部保留 */
}
/* 复选框选中时展示下拉菜单 */
.menu-toggle:checked ~ .dropdown {
  display: block;
}
/* 空白关闭遮罩样式 */
.close-overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
}
.menu-toggle:checked ~ .close-overlay {
  display: block;
}
/* 记得删除原有所有:hover触发下拉显隐的CSS规则，避免样式冲突 */

方案2：原生JavaScript实现 #

适合需要更多自定义交互逻辑的场景，代码量小灵活性更高：

• 给网格图标和下拉菜单分别添加唯一ID用于元素获取
• 绑定按钮点击事件切换下拉菜单的激活类
• 绑定全局点击事件，实现点击非菜单/按钮区域自动关闭菜单的效果

示例代码：

<!-- 页面结构调整 -->
<div class="grid-icon" id="menu-trigger">
  <!-- 原有网格图标代码保留 -->
</div>
<ul class="dropdown" id="dropdown-content">
  <!-- 原有下拉菜单内容保留 -->
</ul>

/* 样式调整 */
.dropdown {
  display: none;
  /* 原有下拉菜单的定位、样式等规则全部保留 */
}
.dropdown.active {
  display: block;
}
/* 记得删除原有所有:hover触发下拉显隐的CSS规则，避免样式冲突 */

// 交互逻辑
const menuTrigger = document.getElementById('menu-trigger')
const dropdownContent = document.getElementById('dropdown-content')

// 点击按钮切换菜单显隐
menuTrigger.addEventListener('click', e => {
  e.stopPropagation()
  dropdownContent.classList.toggle('active')
})

// 点击菜单内部不关闭菜单
dropdownContent.addEventListener('click', e => {
  e.stopPropagation()
})

// 点击页面其他区域关闭菜单
document.addEventListener('click', () => {
  dropdownContent.classList.remove('active')
})

注意事项 #

• 两种方案都需要先删除原有CSS中所有基于:hover实现的下拉显隐规则，避免触发逻辑冲突
• 注意设置下拉菜单和遮罩层的z-index层级，保证其高于页面其他普通元素，避免被遮挡

内容的提问来源于stack exchange，提问作者Diego Fonseca