我希望当我点击按钮时,它会显示内容并获取类列表(“pm_sl_active”),以获取颜色和字体重量,如果我点击第二个按钮,第一个按钮的内容、颜色和重量就会消失。
我不知道我的if条件是否有错误。
谢谢你的回复。
let p_m = document.body.querySelector(".p_m");
let s_l = document.body.querySelector(".s_l");
let poledniMenu = document.body.querySelector(".poledniMenu");
let stalyListek = document.body.querySelector(".stalyListek");
if (poledniMenu.style.display === "block") {
p_m.classList.add("pm_sl_active");
} else{
p_m.addEventListener("click", ()=> {
poledniMenu.style.display = "block";
stalyListek.style.display = "none";
});
}
if (stalyListek.style.display === "block") {
s_l.classList.add("pm_sl_active");
} else{
s_l.addEventListener("click", ()=> {
stalyListek.style.display = "block";
poledniMenu.style.display = "none";
s_l.classList.remove("pm_sl_active");
});
}
button{
padding: 10px 30px;
margin: 0;
cursor: pointer;
}
.pm_sl_active{
color: rgb(255, 87, 87);
font-weight: 800;
}
.poledniMenu{
display:block;
}
.stalyListek{
display: none;
}
<button class="p_m">Polední menu</button>
<button class="s_l">Stálý lístek</button>
<div class="poledniMenu">
<h3>POLEDNÍ MENU <br>
25.6.2021</h3>
<p>Rozvoz z technických důvodů není.<br>
Děkujeme za pochopení.</p>
</div>
<div class="stalyListek">
<h3>STÁLÝ JÍDELNÍ LÍSTEK</h3>
<p>Rozvoz z technických důvodů není.<br>
Děkujeme za pochopení.</p>
</div>
1条答案
按热度按时间of1yzvn41#
使用事件侦听器时,
if
语句应该在函数内部。使用
addEventListener()
是一种在每次调用事件时添加函数的方法。在这里,当display !== "none"
,因此它仅在初始化时验证显示。以下是你的第一句话:
我也颠倒了你的思路
if
语句:显示的元素并不总是具有block
价值