移动端hover触发下拉菜单点击后闪烁消失无法正常显示问题咨询

问题根源 #

• 移动端无原生hover交互，浏览器对hover的模拟逻辑为「点击瞬间触发hover状态，点击动作结束后立即清除hover状态」，你当前仅通过:hover伪类触发子菜单显示，自然只会出现闪一下就消失的效果。
• 用来触发菜单的a标签是空href，点击后会触发默认的页面跳转/刷新行为，也会导致刚显示的菜单直接消失。

修复方案 #

方案1：纯CSS修复（改动量小，兼容性好） #

1. 先修改HTML触发元素，增加可聚焦属性、禁用默认跳转：

<!-- 替换原有触发菜单的a标签即可 -->
<a href="javascript:void(0)" tabindex="0">ابحث في الموقع</a>

2. 补充CSS触发规则，同时保留桌面端hover能力：

/* 在原有CSS基础上新增以下规则即可 */
.menu a:focus + .submenu,
.submenu:hover,
.submenu:focus-within {
    display: block;
}

方案2：JS实现点击切换（交互更稳定，适配全场景） #

如果需要更可控的交互逻辑，可以增加少量JS代码实现点击切换显示/隐藏：

const menuTrigger = document.querySelector('.menu > a')
const submenu = document.querySelector('.submenu')

// 点击触发元素切换菜单显隐
menuTrigger.addEventListener('click', (e) => {
  e.preventDefault()
  submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block'
})

// 点击菜单外区域自动关闭菜单
document.addEventListener('click', (e) => {
  if (!menuTrigger.contains(e.target) && !submenu.contains(e.target)) {
    submenu.style.display = 'none'
  }
})

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