多个嵌套的可折叠元素：第一个 <div> 有效，第二个无效

Question

我试图创建一个嵌套的可折叠<div>。

我面临的问题：当我在加载页面后第一次尝试单击第二个<div> 时，它不起作用。然而，如果我们尝试点击第一个 <div>，它会完美运行。

document.addEventListener('DOMContentLoaded', function() {
  const found = document.querySelectorAll('.collapse-content .collapse-head-content');
  
  for (let i = 0, len = found.length; i < len; i++) {
    found[i].addEventListener('click', handler, true);
  }

  function handler(e) {
    const hidden = e.target.classList.contains('hide-content');
    
    if (hidden) {
      e.target.classList.remove('hide-content');
    }
    else {
      e.target.classList.add('hide-content');
    }
  }
});

.collapse-content .collapse-head-content::before {
  content: ' ^ ';
  cursor: pointer;
}

.collapse-content .hide-content.collapse-head-content::before {
  content: ' > ';
}

.collapse-content .hide-content.collapse-head-content~.collapse-body-content {
  display: none;
}

<div class="bank-details collapse-content">
  <div class="state-name collapse-head-content hide-content">
    Click me to collapse / show
  </div>
  <div class="collapse-body-content">
    <div class="collapse-content">
      <div class="district-name collapse-head-content hide-content">
        District
      </div>
      <div class="branch-name collapse-body-content">
        <a href="#">name</a>
        <a href="#">name</a>
        <a href="#">name</a>
      </div>
    </div>
  </div>
  <div class="state-name collapse-head-content hide-content">
    Click me to collapse / show
  </div>
  <div class="collapse-body-content">
    <div class="collapse-content">
      <div class="district-name collapse-head-content hide-content">
        District
      </div>
      <div class="branch-name collapse-body-content">
        <a href="#">name</a>
        <a href="#">name</a>
      </div>
    </div>
  </div>
</div>

Answer 1

使用相邻的兄弟选择器+ 来切换可见性

在下面更新的 sn-p 中，我修改了第三个 CSS 块以使用 + 选择器。也就是说，如果.collapse-body-content 块直接跟在.hide-content 之后，它就是隐藏的；否则，它将保持可见。这样做时，每次切换 .hide-content 类时，其内容将自动切换其可见性。

document.addEventListener('DOMContentLoaded', function() {
  const found = document.querySelectorAll('.collapse-content .collapse-head-content');
  
  for (let i = 0, len = found.length; i < len; i++) {
    found[i].addEventListener('click', handler, true);
  }

  function handler(e) {
    const hidden = e.target.classList.contains('hide-content');
    
    if (hidden) {
      e.target.classList.remove('hide-content');
    }
    else {
      e.target.classList.add('hide-content');
    }
  }
});

.collapse-content .collapse-head-content::before {
  content: ' ^ ';
  cursor: pointer;
}

.collapse-content .hide-content.collapse-head-content::before {
  content: ' > ';
}

.hide-content + .collapse-body-content {
  display: none;
}

<div class="bank-details collapse-content">
  <div class="state-name collapse-head-content hide-content">
    Click me to collapse / show
  </div>
  <div class="collapse-body-content">
    <div class="collapse-content">
      <div class="district-name collapse-head-content hide-content">
        District
      </div>
      <div class="branch-name collapse-body-content">
        <a href="#">name</a>
        <a href="#">name</a>
        <a href="#">name</a>
      </div>
    </div>
  </div>
  <div class="state-name collapse-head-content hide-content">
    Click me to collapse / show
  </div>
  <div class="collapse-body-content">
    <div class="collapse-content">
      <div class="district-name collapse-head-content hide-content">
        District
      </div>
      <div class="branch-name collapse-body-content">
        <a href="#">name</a>
        <a href="#">name</a>
      </div>
    </div>
  </div>
</div>