如何使一个事件切换HTML类上的一个元素，而从其他删除它?

Question

那么，我有一个展示一组小尺寸图像的小项目。当你点击其中一个时，它就会展开。基本上，JavaScript添加了一个HTML类"active"到一个元素，它对它进行转换。

const panels = document.querySelectorAll('.panel');
/*adding an event for every image panel that makes
panel active on click */
panels.forEach(panel => {
panel.addEventListener('click', () => {
removeActiveClasses()
panel.classList.add('active')
})
})
//a function that removes active class from a panel
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}

因此，当您单击该元素时，它将从其他元素中删除所有.active类，然后将其添加到目标元素中。它工作得很完美，但是我希望能够从当前活动的元素中删除一个类，所以当我单击展开的图片时，它会收缩回来。将panel.classList.add更改为panel.classList.toggle显然不起作用，因为它首先删除所有活动类，然后再删除togglestoggle;它(或添加，因为没有)。如何在单击时从活动元素中删除类，同时保留其他功能?

Answer 1

解决方案:感谢CBroe我已经成功了。代码现在看起来如下所示:

const panels = document.querySelectorAll('.panel');
/*adding an event for every image panel that makes
panel active on click */
panels.forEach(panel => {
panel.addEventListener('click', () => {
const isActive = panel.classList.contains('active')
removeActiveClasses()
panel.classList.toggle('active', !isActive)
})
})
//a function that removes active class from a panel
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}

Answer 2

更有效的方法是:

document.getElementsByClassName('panel').addEventListener('click', function() {
for (let ele of panels) {
ele.classList.remove('active')
}
let panel = this
panel.classList.includes('active') ? panel.classList.remove('active') : panel.classList.add('active')
)