我正在尝试从单个事件侦听器切换 2 个元素的类,但只有第一个元素被修改。
const toggleBtn = document.querySelector(".toggle-btn");
const slideoutSidebar = document.querySelector(".slideout-sidebar");
const slideTheBar = function () {
toggleBtn.classList.toggle("toggle-slide");
slideoutSidebar.classList.toggle("slideout-slide");
};
toggleBtn.addEventListener("click", slideTheBar);
我有这两个元素(toggleBtn、slideoutSidebar)并且我创建了一个函数来为每个元素切换一个类。然后,我将此函数附加到 toggleBtn 元素的事件侦听器。
问题是当事件执行时,只有函数的第一行代码在工作toggleBtn.classList.toggle("toggle-slide");
而第二个slideoutSidebar.classList.toggle("slideout-slide");
不是。我究竟做错了什么?
这似乎工作正常?
const toggleBtn = document.querySelector(".toggle-btn");
const slideoutSidebar = document.querySelector(".slideout-sidebar");
console.log(toggleBtn);
const slideTheBar = function () {
toggleBtn.classList.toggle("toggle-slide");
slideoutSidebar.classList.toggle("slideout-slide");
};
toggleBtn.addEventListener("click", slideTheBar);
.slideout-sidebar {
display: block;
height: 200px;
width: 100px;
position: absolute;
top: 0;
right: -200px;
background: #F05D7C;
color: #fff;
font-size: 20px;
transition: all 0.3s ease-in;
}
.slideout-slide.slideout-slide {
right: 0
}
<button class="toggle-btn">Toggle</button>
<div class="slideout-sidebar">Slide me in</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句