如何阻止菜单hover时自动展开？移动端菜单点击展开干扰问题求助

1. 先排查HTML结构的默认展开设置 #

检查第一个菜单项的HTML代码，看是否自带了open（针对<details>标签）或自定义的expanded类这类默认展开属性，直接移除即可：

<!-- 错误示例 -->
<li class="menu-item expanded">
  <a href="#">一级菜单1</a>
  <ul class="submenu">...</ul>
</li>

<!-- 修正后 -->
<li class="menu-item">
  <a href="#">一级菜单1</a>
  <ul class="submenu">...</ul>
</li>

2. 用JavaScript绑定精准的点击触发逻辑 #

既然CSS方案无效，说明问题大概率出在事件触发逻辑上，用JS给每个带子菜单的项单独绑定点击事件，仅在点击对应项时切换子菜单状态：

// 获取所有包含子菜单的一级菜单项
const menuItems = document.querySelectorAll('.menu-item:has(.submenu)');

menuItems.forEach(item => {
  const trigger = item.querySelector('a');
  trigger.addEventListener('click', (e) => {
    // 阻止锚点链接的默认跳转行为（按需保留）
    e.preventDefault();
    // 切换当前点击项的展开状态
    item.classList.toggle('expanded');
    // 自动关闭其他已展开的子菜单（可选，根据需求调整）
    menuItems.forEach(otherItem => {
      if (otherItem !== item) otherItem.classList.remove('expanded');
    });
  });
});

配合CSS控制子菜单的显示/隐藏：

/* 默认隐藏所有子菜单 */
.submenu {
  display: none;
}

/* 仅当父项有expanded类时显示子菜单 */
.menu-item.expanded .submenu {
  display: block;
}

/* 优化移动端点击区域 */
.menu-item a {
  display: block;
  padding: 12px 16px;
}

3. 修正:focus状态的错误CSS规则 #

移动端点击元素会触发:focus状态，检查之前的CSS是否错误地给第一个菜单项的:focus设置了展开样式，改成基于类的控制：

/* 错误示例 */
.menu-item:first-child:focus .submenu {
  display: block;
}

/* 修正后 */
.menu-item.expanded .submenu {
  display: block;
}

4. 检查框架/插件的默认配置 #

如果用了Bootstrap、Vue这类框架或第三方菜单插件，查看官方文档，确认是否存在「默认展开第一个菜单项」的配置项，找到并关闭该设置（比如Bootstrap Collapse组件要移除子菜单的show类）。

内容的提问来源于stack exchange，提问作者Real Styling Solutions