切换 div，以便一次只打开一个，但也可以关闭它们以及 javascript

Question

我有这些div，我可以切换点击以一次缩放一个更大的div。它完美地工作，除了一旦一个被放大，一个总是被放大。我正在使用切换打开。我希望能够做到这一点，以便它可以做它已经做的事情，但是然后点击放大的div，让它回到原来的大小，而不必与另一个div切换。换句话说，我需要一种方法来使页面恢复到所有div都处于原始大小的状态。我尝试了其他语句无济于事，并添加了另一个函数来删除类。我只想要一个js解决方案 - 没有jquery或其他任何东西。这是它的JS部分。

const event = document.querySelectorAll('.eventsBorder')

function toggleOpen() {

    let opened = document.getElementsByClassName('large')[0];

    if(opened!=undefined)

        opened.classList.toggle('large');

    this.classList.toggle('large');

} 

event.forEach(eventsBorder => eventsBorder.addEventListener('click', toggleOpen));

这是我的密码笔

提前感谢您的任何帮助！

Answer 1

该变量会返回具有该类的所有 HTML 元素的列表，当您再次单击已放大的、自动满足此条件的 HTML 元素时。因此，如果单击同一项两次，则函数首先从该项中删除该类，然后再次添加它，因为代码中的以下行 -openedlargedivtoggleOpenlargethis.classList.toggle('large');实现您想要的最好方法是确保除了不是 之外，您还应该确保与您单击的项目不是同一个项目。您可以使用以下方法完成此操作：openedundefinedopenedif(opened != undefined && opened != this)下面是指向更新的代码笔的链接，可查看其运行情况。

Answer 2

因此，看起来您正在使用 querySelectorAll 来选择类为“large”的所有元素，然后您正在切换该类。如果切换该类，它将不再是该查询选择的一部分，因为它不再应用该类，因此它将无法将其删除。const event = document.querySelectorAll('.eventsBorder') event.forEach(eventsBorder =>                eventsBorder.onclick = () =>                eventsBorder.classList.toggle('large'));这似乎可以满足您的需求。