为什么我的可折叠式收音机无法正常工作？

Question

我很难使此折叠式电脑正常工作。它与div有关，因为在第二个可折叠对象中，我删除了包含的div，它工作正常。有什么问题吗？

https://codepen.io/TheConnorCraig/pen/eLdaVQ

awk '{firstline=2; cuttail=1; l[NR]=$0} END {for (i=firstline; i<=length(l)-cuttail; i++) print l[i]}'

var coll = document.getElementsByClassName("cbCollapse");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.cbCollapseRow {
  display: flex;
}

.cbCollapse {
  background-image: url('https://www.pitsco.com/skins/mobile/PlusIcon.svg');
  background-size: cover;
  cursor: pointer;
  padding: 30px;
  border: none;
  margin-bottom: 15px;
}

.content {
  width: 100%;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

Answer 1

您在代码中定位了nextElementSibling，因此需要将button html移到要折叠/展开的div上方。

例如（使您可能需要h2标签的对齐方式，但可以说明问题）：

var coll = document.getElementsByClassName("cbCollapse");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.cbCollapseRow {
  display: flex;
}

.cbCollapse {
  background-image: url('https://www.pitsco.com/skins/mobile/PlusIcon.svg');
  background-size: cover;
  cursor: pointer;
  padding: 30px;
  border: none;
  margin-bottom: 15px;
}

.content {
  width: 100%;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<div class="cbCollapseRow">
  <h2>Sample 1</h2>
</div>
<button class="cbCollapse"></button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>

<button class="cbCollapse"></button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>


<div class="cbCollapseRow">
  <h2>Sample 3</h2>
</div>
<button class="cbCollapse"></button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>

Answer 2

元素未随包含的div扩展的原因是由于您定位了nextElementSibling()。这导致您的<h2>收到最大高度样式。

如果要将容器保留在所有容器上，可以将其更改为this.parentNode.nextElementSibling;，当前代码将起作用。 see this pen

但是，这将破坏未包装的div。如果您想将它们全部包装起来，那么这应该不是问题。

Answer 3

nextElementSibling应该自己说话。这不是你的兄弟姐妹。

此外，请尽量不要在for循环中创建/分配函数。
这是使用data-*属性来定位所需的 Content 元素的翻拍 ID

const collapseTarget = (evt) => {
  const btn = evt.currentTarget;
  const id = btn.getAttribute("data-collapse");
  const cont = document.querySelector(id);
  btn.classList.toggle("active");
  cont.style.maxHeight = cont.clientHeight ? 0 : cont.scrollHeight + "px";
}

const collapseBtns = document.querySelectorAll("[data-collapse]");
[...collapseBtns].forEach( btn => btn.addEventListener("click", collapseTarget ));

.cbCollapseRow {
  display: flex;
}

.cbCollapse {
  background-image: url('https://www.pitsco.com/skins/mobile/PlusIcon.svg');
  background-size: cover;
  cursor: pointer;
  padding: 30px;
  border: none;
  margin-bottom: 15px;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<div class="cbCollapseRow" data-collapse="#coll1">
  <button class="cbCollapse"></button>
  <h2>Sample 1</h2>
</div>
<div class="content" id="coll1">
  <p>Lorem ipsum dolor sit amet</p>
</div>

<button class="cbCollapse" data-collapse="#coll2"></button>
<div class="content" id="coll2">
  <p>Lorem ipsum dolor sit amet</p>
</div>

<div class="cbCollapseRow" data-collapse="#coll3">
  <button class="cbCollapse"></button>
  <h2>Sample 3</h2>
</div>
<div class="content" id="coll3">
  <p>Lorem ipsum dolor sit amet</p>
</div>

Answer 4

var content = this.nextElementSibling;

这意味着您要折叠/展开的元素是按钮的直接邻居，对于第一个和最后一个元素，它是h2标记。更改为

var content = this.parentNode.nextElementSibling;和正确的div为目标。

这是有效的代码段：

var coll = document.getElementsByClassName("cbCollapse");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    //This is the changed line VVVVV
    var content = this.parentNode.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.cbCollapseRow {
  display: flex;
}

.cbCollapse {
  background-image: url('https://www.pitsco.com/skins/mobile/PlusIcon.svg');
  background-size: cover;
  cursor: pointer;
  padding: 30px;
  border: none;
  margin-bottom: 15px;
}
.content {
  width: 100%;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<div class="cbCollapseRow">
    <button class="cbCollapse"></button>
    <h2>Sample 1</h2>
</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="cbCollapseRow">
    <button class="cbCollapse"></button>
    <h2>Sample 2</h2>
</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="cbCollapseRow">
    <button class="cbCollapse"></button>
    <h2>Sample 3</h2>
</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet</p>
</div>