下拉菜单点击后闪烁无法保持展开的问题解决方案

菜单闪现后立刻隐藏的核心原因是触发下拉的<a>标签href属性为空字符串。点击空链接时浏览器会触发默认行为：重载当前页面。JS执行toggle操作后确实给下拉菜单加上了visible类，但页面马上刷新重置了所有DOM状态，菜单回到初始隐藏状态，视觉上就是闪一下消失。
原有逻辑还存在两个体验问题：

• 点击下拉菜单外的区域无法自动收起菜单
• 点击下拉菜单内的子项链接同样会触发页面刷新

• 在点击事件中拦截a标签的默认跳转行为，同时阻止事件冒泡
• 新增全局点击监听，实现点击菜单外区域自动收起
• 给下拉菜单本身绑定点击事件阻止冒泡，避免点击菜单内部时误触发收起

JavaScript部分 #

替换原有JS逻辑即可：

// 下拉触发按钮点击逻辑
document.querySelector('#drop').addEventListener('click', (e) => {
  e.preventDefault(); // 拦截a标签默认跳转刷新
  e.stopPropagation(); // 阻止事件冒泡到全局
  document.querySelector('.sub-men').classList.toggle('visible');
})

// 全局点击收起菜单
document.addEventListener('click', () => {
  document.querySelector('.sub-men').classList.remove('visible');
})

// 点击菜单内部时不触发收起
document.querySelector('.sub-men').addEventListener('click', (e) => {
  e.stopPropagation();
})

可选HTML优化 #

如果当前阶段链接不需要实际跳转，可以把空href替换为javascript:void(0)，从HTML层面避免误刷新：

<nav>
    <h1 class="logo">Logo</h1>
    <ul class="main-menu">
        <li><a href="javascript:void(0)">Link 1</a></li>
        <li><a href="javascript:void(0)" id="drop">Link 2</a>
        <ul class="sub-men">
            <li><a href="javascript:void(0)">Sub-1</a></li>
            <li><a href="javascript:void(0)">Sub-1</a></li>
            <li><a href="javascript:void(0)">Sub-1</a></li>
        </ul>
        </li>
        <li><a href="javascript:void(0)">Link 3</a></li>
    </ul>
</nav>

后续需要给链接配置真实跳转地址时，直接把javascript:void(0)替换为目标URL即可，页面跳转时会自动重载，下拉菜单默认收起，不需要额外调整逻辑。

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