Question

我希望能够点击一个div，然后点击div展开，而所有其他div通过隐藏＆＃34;而消失。添加了类（我已经为此创建了一个＆＃34;隐藏＆＃34;类）。我有一个活跃的＆＃34; class，当添加到div时，可以根据需要扩展div。到目前为止，我已经能够添加＆＃34;活跃的＆＃34;点击上的div类。

我遇到的问题是，我不知道如何通过添加＆＃34;隐藏＆＃34;来删除其他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>

将隐藏类添加到除活动之外的项目

1 个答案: