如何防止下拉菜单在滚动操作时自动收起？

你的问题核心是子菜单滚动时触发了父菜单的收起逻辑，通常是事件冒泡或者触摸事件冲突导致的。以下是具体解决方法：

1. 阻止子菜单的滚动事件冒泡 #

给子菜单添加事件监听，阻止滚动事件向上冒泡到父元素，避免触发父菜单的收起逻辑：

// 获取所有可滚动的子菜单
const scrollableSubmenus = document.querySelectorAll('.nav li ul');

scrollableSubmenus.forEach(menu => {
  // 阻止鼠标滚动事件冒泡
  menu.addEventListener('wheel', (e) => {
    e.stopPropagation();
  });

  // 阻止移动端触摸滚动事件冒泡
  menu.addEventListener('touchmove', (e) => {
    e.stopPropagation();
  });
});

2. 调整菜单收起逻辑的触发条件 #

检查你控制菜单显示/隐藏的代码，确保只有点击父菜单标题或者点击菜单外部区域时才收起子菜单，而不是点击子菜单内部（包括滚动时的触摸/点击）：

// 假设父菜单的选择器是 .nav li.parent
const parentMenus = document.querySelectorAll('.nav li.parent');

parentMenus.forEach(parent => {
  parent.addEventListener('click', (e) => {
    // 只有点击父菜单本身（不是子菜单）时才切换展开状态
    if (e.target === parent || !parent.contains(e.target)) {
      parent.classList.toggle('active');
    }
  });
});

// 点击外部区域收起所有菜单
document.addEventListener('click', (e) => {
  if (!document.querySelector('.nav').contains(e.target)) {
    document.querySelectorAll('.nav li.parent.active').forEach(active => {
      active.classList.remove('active');
    });
  }
});

3. 优化CSS确保滚动区域独立 #

你的现有CSS已经设置了滚动属性，可以补充以下属性强化滚动区域的独立性：

.nav li ul {
  max-height: 550px;
  overflow-y: auto;
  /* 限定移动端触摸仅垂直滚动，避免触发父元素行为 */
  touch-action: pan-y;
  /* 确保子菜单独立响应交互，不受父元素干扰 */
  pointer-events: auto;
}

/* 配合展开状态的显示逻辑，确保子菜单展开时正常显示 */
.nav li.parent.active ul {
  display: block; /* 替换为你实际使用的显示方式，比如flex */
}

关键说明： #

• touch-action: pan-y：告诉浏览器移动端触摸时仅允许垂直滚动，不会触发其他触摸行为（比如父元素的滑动收起）。
• e.stopPropagation()：阻止事件向上冒泡，避免父元素的点击/触摸事件被误触发。
• 精准控制收起触发条件：确保只有用户明确操作父菜单或外部区域时才收起子菜单，排除子菜单内的操作触发收起的情况。

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