javascript - 点击按钮不起作用 - >转换
问题描述
我的(汉堡)按钮有问题。
当我单击 It's added a class to my header-links, but class is not working -> 我需要在单击时从 transform: translateX(100%) 更改为 transform: translateX(0);
我不知道为什么它不起作用。请帮助我,我尝试了很多方法来修复它,但仍然无法正常工作。
到目前为止我的代码:
<header>
<div class="header-logo">
<p>ecodex</p>
</div>
<ul class="header-links">
<li><a href="#container-two">O NAS</a></li>
<li><a href="#">OFERTA</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>
<div class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</div>
</header>
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
p {
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase;
}
.header-active {
transform: translateX(0);
}
.header-links {
display: flex;
justify-content: space-around;
width: 30%;
list-style-type: none;
li {
font-size: 14px;
letter-spacing: 3px;
@media only screen and (max-width: 768px) {
opacity: 0;
}
}
@media only screen and (max-width: 1024px) {
width: 60%;
}
@media only screen and (max-width: 768px) {
position: absolute;
right: 0;
height: 90vh;
top: 8vh;
background: black;
display: flex;
flex-direction: column;
align-items: center;
color: white;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
.header-active {
transform: translateX(0);
}
}
}
.menu {
cursor: pointer;
display: none;
@media only screen and (max-width: 768px) {
display: block;
}
div {
width: 25px;
height: 2px;
background-color: black;
margin: 5px;
}
}
}
const headerSlide = () => {
const menu = document.querySelector('.menu');
const headerLinks = document.querySelector('.header-links');
menu.addEventListener('click', () => {
headerLinks.classList.toggle('header-active');
});
}
headerSlide();
在开发人员工具中,当我单击按钮时,“header-active”类正在添加和删除 - 这很好,但不知道为什么我的 transform: translate(0) 不起作用。
解决方案
这应该可以解决问题:
.header-active {
transform: translateX(0) !important;
}
问题是 .header-links 有 translateX(100%),所以 translateX 被忽略。我会将transform: translateX (100%)移动到另一个类并在添加 .header-links 之前将其删除。
CSS
.tX100 {
transform: translateX(100%);
}
HTML
<ul class="header-links tX100">
JS
headerLinks.classList.toggle('tx100');
headerLinks.classList.toggle('header-active');
推荐阅读
- python - 使用 Opencv python 从图像中裁剪矩形
- javascript - 通过读取 jscript 中的数组映射数据在我的 html 页面上显示警报
- yammer - Yammer API。对 AllCompany 使用 /messages/in_group/[:group_id].json
- c++ - 我必须更改我的号码最后一位和第一位,但不使用仅具有整数或循环的函数。例如从 12345 到 52341
- artificial-intelligence - Qlearning Epsilon-greedy 探索:Epsilon 衰减 X 已修复
- javascript - 每次单击按钮时我都想执行一个函数使用 JQuery
- javascript - 仅通过三角形边的长度是否足以在 WebGL 中绘制三角形?
- uml - 小型 JEE 项目的类图
- java - CardView onClick 点击测试?
- javascript - 添加第二个 addEventListener() 会破坏第一个