移动端导航下拉菜单点击汉堡按钮及外部无法关闭问题求助

原代码存在两个核心问题：

• 汉堡按钮仅触发菜单打开，未处理再次点击关闭的逻辑
• 点击菜单外部关闭的逻辑判断错误，e.target === dropDown仅匹配菜单容器本身，点击菜单内部元素时不会触发，且未排除汉堡按钮的点击事件

修改后的JavaScript代码 #

const mobileMenu = document.querySelector('.nav-right-mobile i');
const dropDown = document.querySelector('.nav-right');
const cancel = document.querySelector('.cancel');

// 汉堡按钮：切换菜单显示/隐藏状态
mobileMenu.addEventListener('click', (e) => {
    // 阻止事件冒泡，避免触发window的点击事件
    e.stopPropagation();
    dropDown.style.display = dropDown.style.display === 'block' ? 'none' : 'block';
});

// 关闭按钮：隐藏菜单
cancel.addEventListener('click', () => {
    dropDown.style.display = 'none';
});

// 点击页面其他区域关闭菜单
window.addEventListener('click', function(e) {
    const isMenuVisible = dropDown.style.display === 'block';
    const isClickInsideMenu = dropDown.contains(e.target);
    const isClickOnHamburger = mobileMenu.contains(e.target);
    
    if (isMenuVisible && !isClickInsideMenu && !isClickOnHamburger) {
        dropDown.style.display = 'none';
    }
});

// 阻止菜单内部的点击事件冒泡，避免误关闭
dropDown.addEventListener('click', (e) => {
    e.stopPropagation();
});

关键改动说明 #

1. 汉堡按钮逻辑：新增状态判断，根据当前菜单的display值切换显示/隐藏，同时用e.stopPropagation()阻止事件传递到window，避免刚打开就被误关闭
2. 外部点击判断：使用dropDown.contains(e.target)检查点击是否在菜单内部，同时排除汉堡按钮的点击，确保只有点击菜单外的区域才触发关闭
3. 菜单内部事件拦截：给菜单容器添加点击事件阻止冒泡，避免点击菜单内的链接、按钮时触发关闭逻辑

原HTML/CSS保留参考 #

HTML代码

<nav>
    <div class="upper-nav">
        <a href="#"><img src="/images/topLogo.55926006.svg"
             class="logo-color"></a>  
    </div>
    <div class=" container lower-nav">
        <div class="nav-left">
            <a href="#home" class="logo-white" ><img src="/images/logoWhite.8b1d1362.png"></a>
            <a href="#home" class="logo-gray" ><img src="/images/logoScroll.5afbf69d.png"></a>
        </div>

        <div class="nav-right">
            <ul>
                <div class="mobile-top">
                    <a href="#home" class="logo-gray-mobile" ><img src="/images/logoScroll.5afbf69d.png"></a>
                    <div class="cancel"><i class="uil uil-times"></i></div>
                </div>
                <li><a href="#">About</a></li>
                <li><a href="#">Store</a></li>
                <li><a href="#">Events</a></li>
                <button class="btn">REGISTER NOW</button>
            </ul>
        </div>
        <div class="nav-right-mobile">
            <i class="uil uil-bars"></i>
        </div>
    </div>
</nav>

CSS代码

.nav-right{
    display: none;
    background: white;
    width: 40vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.nav-right ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    padding: 0 2rem;
}

.nav-right ul a{
    color: black;
}

.nav-right ul button{
    margin-top: 36rem;
}

.mobile-top{
    overflow: hidden;
    width: 34vw;
    height: 5rem;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
   
}

.logo-gray-mobile{
    height: 100px;
    width: 100px;
}

.cancel{
    font-size: 2rem;
}

.nav-right-mobile{
    display: block;
    font-size: 2rem;
    color: var(--color-light);
    font-style: myFontHeavy;
    font-weight: bold;
    cursor: pointer;
}

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