桌面端切换移动端视图时，如何禁用菜单悬停展开下拉菜单？

以下是几种精准解决该问题的方案，仅针对桌面端模拟移动端的场景禁用hover展开效果，不会影响真实移动设备：

方案1：CSS媒体查询精准匹配场景 #

利用hover媒体特性区分支持鼠标悬停的设备（桌面浏览器，包括模拟移动端的情况），结合窗口宽度阈值，仅在目标场景下禁用hover展开：

/* 替换为你项目的移动端宽度阈值，比如768px */
@media (hover: hover) and (max-width: 768px) {
  /* 替换成你项目中下拉菜单的实际选择器 */
  .dropdown-parent:hover .dropdown-menu {
    display: none !important;
    /* 若项目用类控制展开（如.active），可改为：
    .dropdown-parent:hover:not(.active) .dropdown-menu { display: none; }
    */
  }
}

• 原理：真实移动设备的hover媒体特性值为none，不会触发该媒体查询；只有桌面浏览器（包括切换到移动端视图的模拟状态）会命中规则，直接禁用hover触发的下拉展开。

方案2：JS监听hover事件并拦截 #

通过判断窗口宽度，在移动端视图下阻止hover事件的展开逻辑：

// 给所有下拉菜单父元素绑定mouseenter事件
document.querySelectorAll('.dropdown-parent').forEach(parent => {
  parent.addEventListener('mouseenter', (e) => {
    // 替换为你的移动端宽度阈值
    if (window.innerWidth <= 768) {
      e.stopPropagation();
      // 强制隐藏下拉菜单
      const menu = parent.querySelector('.dropdown-menu');
      if (menu) menu.style.display = 'none';
    }
  });
});

• 补充：如果下拉菜单通过类名（如dropdown-open）控制展开，可改为在hover事件中移除对应类：parent.classList.remove('dropdown-open')。

方案3：修改原有hover触发逻辑 #

若项目通过JS绑定hover事件实现下拉展开，直接在逻辑中增加窗口宽度判断：

function toggleDropdownOnHover(parent) {
  parent.addEventListener('mouseenter', () => {
    // 仅在桌面端宽度时触发hover展开
    if (window.innerWidth > 768) {
      parent.classList.add('dropdown-open');
    }
  });
  parent.addEventListener('mouseleave', () => {
    if (window.innerWidth > 768) {
      parent.classList.remove('dropdown-open');
    }
  });
}

// 初始化所有下拉菜单
document.querySelectorAll('.dropdown-parent').forEach(toggleDropdownOnHover);

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