Javascript 如何通过单击元素或其任何一个兄弟元素来收缩元素-vanilla js（可能对样式效果或手风琴很有用）

我有三个面板，一个接一个排成一行。当我点击其中一个时，它的宽度会增加。当我单击其他两个面板中的任何一个时，先前增加宽度的面板将收缩，而新单击的面板将加宽。然而，我希望能够通过点击缩小刚刚加宽的面板。我正在努力寻找解决办法，但毫无效果

这是我的代码：

var panels=document.querySelectorAll（'.panel'），
activePanel=document.querySelectorAll（'.panel.open'）；
函数toggleOpen（）{
面板。forEach（功能（项目）{
if（item.classList.contains（'open'））{
item.classList.remove（'open'）；
item.classList.add（'closed'）；
}
});
this.classList.remove（'closed'）；
这个.classList.add（'open'）；
}
函数closeActivePanel（）{
如果（activePanel.length>0）{
activePanel.removeClass（“打开”）；
activePanel.addClass（'closed'）；
}
}
面板。forEach（功能（面板）{
panel.addEventListener（“单击”，切换打开）；
});
activePanel.forEach（函数（aPanel）{
aPanel.addEventListener（“单击”，关闭活动面板）；
});

Lorem ipsum dolor sit amet

同侧眼睑

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

同侧眼睑

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

洛雷姆·伊普苏姆

Lorem ipsum dolor sit amet

为
面板查询DOM的时间。打开它们不存在的
元素。在将类“open”添加到元素后，您必须添加侦听器，或者在
面板
元素的
单击
处理程序中实现切换逻辑。
最后我找到了问题的解决方案。我认为这将是非常有用的手风琴元素，例如。目标是通过单击其中一个元素来增加其宽度（类“open”产生这种效果）。然后通过单击旁边任意两个元素的此元素来缩小它。通过单击其他两个元素来缩小宽元素的效果很容易。但是，通过点击它本身来增加功能来缩小它是一项相当艰巨的任务。事实证明，事件委托并没有什么帮助，因为我需要知道事件的确切目标。以下是我发现有效的方法：

var panels = document.querySelectorAll('.panel');

function togglePanels(event) {
    var target = event.target;

    panels.forEach(function(item) {
        if(item != target) {
            item.classList.remove('open')
        };
    });
    target.classList.toggle('open');    
}

panels.forEach(function(panel) {
    panel.addEventListener('click', togglePanels);
});

您的AddEvent6侦听器正在被调用。尝试在
切换打开中添加日志
抱歉，PaneladdEventListener键入错误。我刚刚更正了它。
activePanel
将只包含在执行
document.querySelectorAll（'panel.open'）
时具有类
open
的元素。使用@Andreas我不知道这种机制。谢谢你的提示！我会尝试一下。然后当“关闭”面板时，你必须删除事件处理程序…@Andreas是的，如果你不想这样做，你可以使用一个更通用的事件处理程序来处理这种切换行为。这正是我正在尝试做的。“到目前为止，我提出了四个想法，但都不管用。”巴克拉尔说