Блог

Главная - Вопросы по программированию - Класс CSS изменяется на консоли, но не отражается на DOM (flask proejct)

Класс CSS изменяется на консоли, но не отражается на DOM (flask proejct)

#javascript #css #flask #dom #rendering

#javascript #css #flask #dom #рендеринг

Вопрос:

Я создаю веб-приложение с помощью Flask и пытаюсь создать небольшое выпадающее меню для выхода пользователя из системы. Я добавил прослушиватель событий в панель навигации (мобильную или настольную), и код работает так же хорошо, как отражено на консоли (я регистрирую элемент и цель на консоли, как вы можете видеть), но это изменение не отражается на 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>
  
 //...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)
    }
})

Комментарии:

1. Я просто хочу знать, почему вы не подключаете прослушиватель кликов к #user-img ?

2. Это было первое, что я сделал, но в этом случае прослушиватель событий даже не будет добавлен. Я открыл консоль, и переменная была там, но прослушиватель событий не был добавлен. Итак, я попробовал с родительским, и это сработало. Событие происходит, и класс переключается, но DOM не меняется

3. Я думаю, вы добавляете событие после завершения загрузки DOM, верно?

4. Да, сценарий находится в конце тела

5. Если вы используете Chrome и после того, как увидите console.log(logoutMenu) , вы можете дважды щелкнуть элемент в консоли, вы увидите, что его класс обновлен. Если он был обновлен, вы видите active , но не видите элемент, видимый на экране, вы можете проверить этот элемент, чтобы увидеть, какое свойство CSS неверно.