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>
//...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)
}
})
解决方案
推荐阅读
- javascript - NodeJs/Webpack 项目中的工件是什么,我们如何使用它进行 CI/CD?
- ruby - Ruby中矩阵元素的比较
- windows - 删除Windows批处理脚本中除一个文件夹之外的文件夹?
- android - 父 RelativeLayout 中子 LinearLayouts 的百分比(加权)高度
- c# - 使用 raycast2D 并让玩家旋转到 .hit 以防止他们跳跃
- python-3.x - 使用 sql 或 pandas 数据框获取前 5 行的 pyspark 数据框
- php - 使用 Dom PDF 将刀片文件转换为 pdf 时出现问题
- javascript - 如何导出在打字稿中生成的导入命名空间?
- python - 类型错误“类型”对象的 Python 脚本问题不可迭代
- servicenow - ServiceNow 将按钮添加到 Sys_popup 视图