男性下拉菜单点击后闪现消失问题求助（附代码）

我设置了“女性”和“男性”两个分类按钮，点击按钮会弹出对应的分类下拉菜单。其中女性菜单功能正常，但男性菜单点击后仅闪现一秒就消失，调用preventDefault()也无法解决该问题。男女菜单使用了相同的div类名，这是否会导致功能异常？

相关代码 #

HTML #

<div class="man">
    <a href="" id="man-shoes">Men</a>
    <div class="dropdown-gender">
        <div class="drop-content">
                <div class="drop-columns">
                    <div class="main-element">
                        <a href="" class="dropdown-item">Shop by Sport</a>
                    </div>
                    <a href="" class="dropdown-item">Running</a>
                    <a href="" class="dropdown-item">Walking</a>
                    <a href="" class="dropdown-item">Lifestyle</a>
                </div>
                <div class="drop-columns">
                    <div class="main-element">
                        <a href="" class="dropdown-item">Shop by Brand</a>
                    </div>
                    <a href="" class="dropdown-item">Nike</a>
                    <a href="" class="dropdown-item">Adidas</a>
                    <a href="" class="dropdown-item">Puma</a>
                    <a href="" class="dropdown-item">Vans</a>
                    <a href="" class="dropdown-item">Reebok</a>
                    <a href="" class="dropdown-item">Sketchers</a>
                </div>
                <div class="drop-columns column3">
                    <div class="column">
                        <img src="" alt="">
                        <a href="" class="dropdown-item">New Arrivals</a>
                    </div>
                    <div class="column">
                        <img src="" alt="">
                        <a href="" class="dropdown-item">Sales</a>
                    </div>
                </div>
            </div>
        </div>
</div>

CSS #

.dropdown-gender {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: rgba(255, 255, 255);
  width: 100vw;
  height: 80vh;
  position: absolute;
  left: 0;
  top: 90px;
  display: none;
  margin: 0 auto;
}

.drop-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 150px;
  color: black;
  width: 80%;
}

JS #

const dropdownGender = document.getElementsByClassName("dropdown-gender");
const womanBtn = document.getElementById("woman-shoes")
const manBtn = document.getElementById("man-shoes")

Array.from(dropdownGender).forEach(element => {


womanBtn.addEventListener("click", () => {
    if (element.style.display === "none") {
    element.style.display = "block";
    } else {
        element.style.display = "none";
    }
})

manBtn.addEventListener("click", () => {
    if (element.style.display === "none") {
        element.style.display = "block";
        } else {
            element.style.display = "none";
        }
})

element.addEventListener("mouseleave", (e) => {
    e.target.style.display = "none";
    e.preventDefault();
})
})

核心问题 #

1. 重复绑定事件：你在Array.from(dropdownGender).forEach循环里给womanBtn和manBtn重复绑定了点击事件。假设页面有2个.dropdown-gender元素（男女各一个），每个按钮会被绑定2次点击事件——点击男性按钮时，第一次触发显示菜单，第二次立刻触发隐藏，直接导致菜单闪现消失。
2. preventDefault()用错地方：你把它放在了mouseleave事件里，但<a>标签的空href=""会触发页面刷新，这才是菜单消失的关键原因之一，需要在按钮的点击事件里调用阻止跳转。
3. 样式冲突：CSS里.dropdown-gender同时写了display: flex;和display: none;，后者覆盖前者，导致JS设置display: block时原本的flex布局失效，可能引发交互异常。
4. 菜单关联逻辑错误：当前逻辑是点击按钮切换所有.dropdown-gender元素的显示状态，而不是只切换对应按钮的菜单。

修复步骤 #

1. 调整HTML结构（关联按钮与对应菜单） #

给每个性别容器加统一类名，方便精准关联：

<div class="gender-container">
    <a href="" id="woman-shoes">Women</a>
    <div class="dropdown-gender">
        <!-- 女性菜单内容 -->
    </div>
</div>
<div class="gender-container">
    <a href="" id="man-shoes">Men</a>
    <div class="dropdown-gender">
        <!-- 男性菜单内容 -->
    </div>
</div>

2. 修复CSS样式 #

移除重复的display声明，用类控制显示隐藏，保留flex布局：

.dropdown-gender {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: rgba(255, 255, 255);
  width: 100vw;
  height: 80vh;
  position: absolute;
  left: 0;
  top: 90px;
  margin: 0 auto;
  display: none;
}

.dropdown-gender.active {
  display: flex;
}

.drop-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 150px;
  color: black;
  width: 80%;
}

3. 重构JS逻辑（避免重复绑定，精准关联） #

const genderContainers = document.querySelectorAll('.gender-container');

genderContainers.forEach(container => {
    const btn = container.querySelector('a');
    const dropdown = container.querySelector('.dropdown-gender');

    btn.addEventListener('click', (e) => {
        e.preventDefault();
        dropdown.classList.toggle('active');
        // 隐藏其他菜单
        document.querySelectorAll('.dropdown-gender.active').forEach(otherDropdown => {
            if (otherDropdown !== dropdown) {
                otherDropdown.classList.remove('active');
            }
        });
    });

    dropdown.addEventListener('mouseleave', () => {
        dropdown.classList.remove('active');
    });
});

关键说明 #

相同类名本身不会导致功能异常，只要逻辑正确关联对应元素即可。你的问题核心是事件重复绑定、默认跳转未阻止，以及菜单关联逻辑错误。用CSS类控制显示隐藏比直接修改style.display更灵活，还能保留原本的布局样式。

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