从单个事件侦听器控制多个元素

克里斯托斯

我正在尝试从单个事件侦听器切换 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用单个事件侦听器而不是多个事件侦听器

使用单个侦听器检查多个元素

如何覆盖单个选择元素中的默认事件侦听器以使其表现得像多个?

多个列表项的单个侦听器

单个承诺的多个侦听器

多个按钮的单个动作侦听器

为多个元素添加事件侦听器并检测哪个元素触发事件 - jQuery

新元素的事件侦听器(单击)。

整理和多个事件侦听器

Javascript 事件侦听器单击多个

多个角度控制器中的onsen navigator后推事件侦听器

有没有办法可以添加单个事件侦听器来覆盖多个?

Java在单线程环境中为单个事件源提供多个Swing侦听器

在尝试创建事件侦听器读取的元素时,控制台抛出未定义

事件侦听器应用于页面上的多个div元素

如何使用 onclick 事件侦听器一次更改多个元素的背景颜色?

将多个事件侦听器添加到一个元素

将同一事件侦听器功能添加到多个元素

将事件侦听器绑定到具有相同类的多个元素

具有相同类的多个元素上的事件侦听器

使用for循环并传递不同的参数将事件侦听器添加到多个元素

将事件侦听器添加到多个生成的元素

将事件侦听器添加到js中的多个选择元素

jQuery DataTables的on()事件侦听器,具有多个事件

如何使用jquery .each()添加单个事件侦听器?

将事件侦听器放置在单个Cookie上

如何创建检查div元素样式的事件侦听器?

JS事件侦听器,用于动态添加元素

绑定事件侦听器并将元素保留为