classList.toggle()失效求助：#user-profile无法二次隐藏问题排查

问题描述 #

尝试通过classList.toggle('user-profile-active')切换#user-profile的显示状态，当前表现：

• 点击#user-profile-logo可显示菜单
• 点击外部区域可隐藏菜单
• 再次点击#user-profile-logo无法隐藏菜单

期望实现：点击logo或外部区域均可切换/隐藏#user-profile。

问题原因 #

事件冒泡与触发顺序导致冲突：

1. 点击#user-profile-logo时，先触发logo的click事件，执行toggle操作让菜单显示
2. 事件冒泡到document，触发mouseup事件；此时e.target是logo，而#user-profile不包含logo元素，代码会执行remove操作，刚显示的菜单立即被隐藏，视觉上表现为无法关闭。

修复方案 #

修改JavaScript代码 #

需要做两处调整：

• 在logo的点击事件中阻止事件冒泡，避免触发document层面的mouseup事件
• 在mouseup事件的判断逻辑中，排除点击logo的情况

修改后的代码：

var userProfileLogo = document.getElementById('user-profile-logo');
var userProfile = document.getElementById('user-profile');

userProfileLogo.addEventListener('click', function(e) {
    // 阻止事件冒泡，避免触发document的mouseup事件
    e.stopPropagation();
    userProfile.classList.toggle('user-profile-active');
});

document.addEventListener('mouseup', function(e){
    // 排除点击logo和菜单内部的情况
    if(!userProfile.contains(e.target) && e.target !== userProfileLogo){
        userProfile.classList.remove('user-profile-active');
    }
});

说明 #

• e.stopPropagation()：阻止点击事件向上冒泡到document，确保logo的toggle操作不会被后续的mouseup事件打断
• 新增e.target !== userProfileLogo判断：防止用户点击logo时，mouseup事件误触隐藏逻辑

完整代码参考 #

HTML代码 #

<ul class="navbar-nav ms-auto">
    {% if request.user.is_authenticated %}
        <li class="nav-item user-profile-view px-2 ms-auto">
            <img src="{% static 'images/user-profile-avatar6.png' %}" alt="" id="user-profile-logo">
            <ul id="user-profile" class="p-0">
                <li class="user-profile-list px-2 py-3" style="border-top-left-radius: 20px; border-top-right-radius: 20px;">
                    <a href="#"><span><i class="fa-solid fa-pencil px-3" style="color: #ff6600;"></i>Edit User</span></a>
                </li>
                <hr class="m-0"> 

                <li class="user-profile-list px-2 py-3">
                    <a href=""><span><i class="fa-sharp fa-solid fa-gear fa-shake px-3" style="color: #ff6600;"></i>Settings</span></a>
                </li>
                <hr class="m-0">

                <li class="user-profile-list px-2 py-3" style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;">
                    <a href="{% url 'logout' %}"><span><i class="fa-solid fa-right-from-bracket fa-beat px-3" style="color: #ff6600;"></i>Logout</span></a>
                </li>
            </ul>
        </li>
    {% else %}
        <li class="nav-item"><a class="nav-link login-link" href="{% url 'login' %}">Login</a></li>
    {% endif %}
    
    <li class="nav-item nav-cart-item">
        <div class=""><a class="nav-link" href="{% url 'cart' %}"><img id="cart-icon" src="{% static 'images/cart1.png' %}"></a></div>
        <p id="cart-total">{{ cartItems }}</p>
    </li>
</ul>

CSS代码 #

#user-profile{
    list-style: none;
    position: absolute;
    top: 54px;
    width: 170px;
    left: -60px;
    background-color: #f1d5c5;
    border-radius: 20px;
    visibility: hidden;
    opacity: 0;
    z-index: 99999999999999999;
    transition: visibility 0s linear 800ms, opacity 400ms;
}

#user-profile.user-profile-active{
    opacity: 1;
    visibility: visible;
    transition: visibility 0s linear 0s, opacity 400ms; 
}

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