如何用VanillaJS实现鼠标移入内部元素仍保持展开的自定义下拉选择框

问题原因 #

你当前仅为下拉触发按钮.categories__link绑定了鼠标移入移出事件，而下拉菜单.categories__wrapper是独立的兄弟元素，鼠标从按钮移动到菜单区域时，会触发按钮的mouseout事件直接关闭菜单，所以出现了你遇到的问题。

解决方法 #

方案1：纯CSS实现（优先推荐，无需JS）

因为触发按钮和下拉菜单都是.nav的直接子元素，只需要新增一行CSS规则即可实现需求，可完全删除你现有的JS代码：

/* 父级导航hover时显示下拉菜单 */
.nav:hover .categories__wrapper {
    display: block;
}

该方案逻辑更简单性能更好，只要鼠标还在.nav范围内（无论是停在触发按钮还是下拉菜单上），菜单都会保持展开，鼠标完全移出.nav区域后菜单才会收起，完全符合你的预期效果。

方案2：JS修改实现

如果需要保留JS控制逻辑，只需要把事件绑定到公共父级.nav上即可：

const nav = document.querySelector('.nav');
const categoriesList = document.querySelector('.categories__wrapper');

function categoriesVisible() {
    categoriesList.style.display = 'block';
}

function categoriesHidden() {
    categoriesList.style.display = 'none';
}

nav.addEventListener('mouseover', categoriesVisible);
nav.addEventListener('mouseout', categoriesHidden);

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