为什么我的可折叠设备不起作用?

Question

我无法让这个可折叠的东西工作。它与div 有关，因为在第二个可折叠对象上，我删除了包含的div，它工作正常。怎么了？

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

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">
<button class="cbCollapse"></button>
<h2>Sample 1</h2>
</div>
<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">
<button class="cbCollapse"></button>
<h2>Sample 3</h2>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>

Answer 1

您的元素没有使用包含的div 进行扩展的原因是由于您的目标nextElementSibling()。这会导致您的<h2>接收最大高度样式。

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

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

Answer 2

你在代码中定位nextElementSibling，所以你需要将你的buttonhtml移动到你想要折叠/展开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 3

>nextElementSibling应该自己说话。在你的情况下，这不是兄弟姐妹。

另外，尽量不要在循环中创建/分配函数。
这是使用data-*属性定位所需内容元素的重制版 身份证

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>