Javascript CSS类在控制台上更改，但未反映在DOM上（flask proejct）

我正在用Flask构建一个web应用程序，并尝试构建一个用于注销用户的小下拉菜单。我向导航栏（移动或桌面）添加了一个事件侦听器，代码在控制台上运行良好（如您所见，我正在控制台上记录元素和目标），但这一更改不会反映在DOM上。 如果我手动将该类添加到DOM中，它就会这样做。我也尝试过将事件侦听器添加到其他元素中，但似乎没有任何效果。 我还尝试使用其他CSS安排来改变特异性，但结果是一样的。 我提到我正在使用Flask，以防Jinja弄乱它，因为这是每个模板继承的主要布局html。 提前谢谢

<nav class="mobile-user">
        <div class="user-menu">
            <img class="profile-img" src="../static/assets/user.png" alt="user's photo">
            <div id="logout" class="logout">
                <ul>
                    <li><a href="{{ url_for('account') }}">Profile</a></li>
                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

---

我只是想知道为什么不将click listener附加到#user img？这是我做的第一件事，但在这种情况下，事件侦听器甚至不会被添加。我打开控制台，变量就在那里，但没有添加事件侦听器。所以我试着和父母谈谈，结果成功了。事件正在发生，类已被切换，但DOM不会更改我猜您是在DOM完成加载后添加事件的，对吗？是的，脚本位于正文末尾如果您使用Chrome，在看到

console.log（logoutMenu）

后，您可以双击控制台中的元素，您将看到其类已更新。如果它已更新，您会看到

处于活动状态

，但在屏幕上看不到该元素，您可能需要检查该元素以查看CSS属性是否不正确。

//...irrelevant html between these two
       <nav class="desktop-nav">
        <div class="nav-container">
            <div class="logo">
                <a href="{{ url_for('index') }}"><h2>queerevent</h2></a>
            </div>
            {% if not current_user.is_anonymous %}
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/favorites">Favorites</a></li>
                <li><a href="/my-events">My Events</a></li>
                <li><a href="/calendar">Calendar</a></li>
                <li><a href="/new">New Event</a></li>
                <li class="user-menu">
                    <img class="profile-img" id="user-img" src="../static/assets/user.png" alt="user's image">
                    <div id="logout" class="logout">
                        <ul>
                            <li><a href="{{ url_for('account') }}">Profile</a></li>
                            <li><a href="{{ url_for('logout') }}">Logout</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            {% else %}
            <ul>
                <li><a href="{{ url_for('login') }}">Sign In</a></li>
            </ul>
            {% endif %}
        </div>
    </nav>

#logout {
    position: relative;
    top: 1rem;
    right: 1.5rem;
    padding: .5rem;
    width: auto;
    height: auto;
    background-color: #fff;
    border: 1px solid black;
    border-radius: 5px;
}

.logout {
    display: none;
}

.logout.active {
    display: inline-block;
}

#logout::before {
    content: '▲';
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translate(-50%);
}

'use strict'
const menu = document.querySelector('.desktop-nav') || document.querySelector('.mobile-user')

menu.addEventListener('click', (e) => {
    const userImage = document.querySelector('#user-img')
    const logoutMenu = document.querySelector('.logout');
    console.log(e.target)
    if (e.target === userImage) {
        logoutMenu.classList.toggle('active');
        console.log(logoutMenu)
    }
})