基于JS的可折叠下拉菜单：悬停时内容自动关闭问题求助

问题出在你只给触发按钮绑定了mouseover事件，且用toggle切换状态——当鼠标从按钮移到内容区域时，按钮的mouseover不会持续触发，一旦鼠标误触按钮就会收起菜单，同时完全没监听内容区域的悬停状态，导致离开按钮就可能触发关闭逻辑。

修复步骤： #

1. 调整HTML结构
   把触发按钮（collapsible类）和对应的内容包在一个父容器里，给父容器加个dropdown-container类：

<div class="dropdown-container">
  <button class="collapsible">下拉菜单标题</button>
  <div class="content">
    <!-- 菜单内容 -->
    <p>菜单选项1</p>
    <p>菜单选项2</p>
  </div>
</div>

2. 替换JS代码
   不再监听单个按钮的mouseover，转而监听父容器的mouseenter（展开）和mouseleave（收起）事件，只要鼠标在按钮或内容范围内，菜单就保持展开：

// 获取所有下拉容器
var dropdownContainers = document.getElementsByClassName("dropdown-container");

for (var i = 0; i < dropdownContainers.length; i++) {
  var container = dropdownContainers[i];
  var btn = container.querySelector(".collapsible");
  var content = container.querySelector(".content");

  // 鼠标进入容器时展开菜单
  container.addEventListener("mouseenter", function() {
    this.querySelector(".collapsible").classList.add("active");
    var content = this.querySelector(".content");
    content.style.maxHeight = content.scrollHeight + "px";
  });

  // 鼠标离开容器时收起菜单
  container.addEventListener("mouseleave", function() {
    this.querySelector(".collapsible").classList.remove("active");
    var content = this.querySelector(".content");
    content.style.maxHeight = null;
  });
}

3. CSS小调整（可选）
   避免按钮和内容之间出现间隙导致鼠标误判，给容器和内容加基础布局样式：

.dropdown-container {
  position: relative;
  display: inline-block; /* 按需设置，比如实现横向菜单 */
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* 如果是悬浮下拉菜单，补充以下样式 */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #eee;
  width: 220px;
}

修改后，只要鼠标停留在父容器（按钮+内容）范围内，菜单就会保持展开状态，离开容器才会收起，完美解决你的问题。

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