javascript - 向元素添加隐藏类，但事件除外

Question

我希望能够点击一个 div，并让点击的 div 展开，而所有其他 div 通过添加一个“隐藏”类消失(我已经为它们创建了一个“隐藏”类这)。我有一个“事件”类，当添加到 div 时，它会根据需要扩展 div。到目前为止，我可以在单击时将“事件”类添加到 div。

我遇到的问题是，我不知道如何通过向它们添加“隐藏”类来删除其他 div。我假设我需要在初始点击后检查它们是否有事件类，如果没有，则隐藏它们，但我不确定。

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Javascript:

const items = document.querySelectorAll('.item');

const toggleOpen = (p, e) => {
    p.classList.toggle('active');
}

items.forEach(
item => {
    item.addEventListener('click', toggleOpen.bind(null, item))
})

CSS: 这是我的示例代码，它允许您在单击时添加一个事件类。 https://jsfiddle.net/a60bur1j/8/

Answer 1

我会用 CSS 和父容器上的类来完成。

const items = document.querySelectorAll('.item');

const toggleOpen = (p, e) => {
    p.classList.toggle('active');
    p.parentNode.classList.toggle('active');
}

items.forEach(
item => {
    item.addEventListener('click', toggleOpen.bind(null, item))
})

.container.active div.active {
   display: block;
}

.container.active div {
   display: none;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>