Javascript从X元素中添加/删除类，但1

Question

所以我有这些伸缩面板，当我单击其中的一个时，我在其中添加了两个类，但是当我单击另一个伸缩面板时，我想从其他伸缩中删除这些类，并且仅应用于当前单击的伸缩蜂。 到目前为止，上面的代码是我提出的。 它可以工作，但是还有其他“干净/优雅”的方式吗？

<div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

js代码段：

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

function toggleOpen(){
    panels.forEach(panel => panel.classList.remove('open','open-active'));
    this.classList.toggle('open');
    this.classList.toggle('open-active');
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen)); 

Answer 1

您可以在父元素上监听冒泡的click事件。 使用closest方法（FF和Chrome），可以将代码简化为：

const panels = document.querySelector('.panels');

panels.addEventListener('click', function(e) {
    const panel = panels.querySelector('.open');
    if (panel) panel.classList.remove('open', 'open-active');
    e.target.closest('.panel').classList.add('open', 'open-active');
}); 

或者，使用一个可以记住当前选定面板的闭包：

(function (panels, panel) {
    panels.addEventListener('click', function(e) {
        if (panel) panel.classList.remove('open', 'open-active');
        (panel = e.target.closest('.panel')).classList.add('open', 'open-active');
    });
})(document.querySelector('.panels'));

Answer 2

尽管您没有提供HTML，但我相信我了解您正在尝试做的事情。 我将用jQuery试一试。

使用jQuery：

let $all = $('.open', '.open-active');
$(".panel").click(function(event) {
    $all.each(function(index, e2) {
        if (!$(event.target).is(e2)) {
            $(e2).removeClass('open', 'open-active');
        }
    });
});