如何制作水平可折叠下拉列表

Question

我不擅长编码，但我想知道如何制作水平可折叠下拉列表？我遇到的问题是，当我点击第2节和第3节时，它会在第1节下打开。有办法解决这个问题吗？

var coll = document.getElementsByClassName("collapsible");
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.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

.collapsible {
display: inline-block;
color: black;
cursor: pointer;
width: 200px;
height: 200px;
border: 2px solid black;
outline: none;
font-size: 15px;
}
.center {
margin: auto;
width: 50%;
}
.content {
display: none;
color: black;
cursor: pointer;
width: 200px;
height: 200px;
border: 2px solid black;
outline: none;
font-size: 15px;
}

<h2>Collapsibles</h2>
<div class="center">
<p>Collapsible Set:</p>
<button type="button" class="collapsible">Section 1</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="collapsible">Open Section 2</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

我希望每个内容都能在正确的部分下打开。

Answer 1

基本上，我所做的主要工作是将每个带有<div class="content">的<button class="collapsible">添加到其包装<div class="wrap">中。这就成功了。然后我只是使用flexbox来更好地定位元素，但包装本身导致内容位于正确的按钮下。

var coll = document.getElementsByClassName("collapsible");
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.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

.collapsible, .content {
display: block;
color: black;
cursor: pointer;
width: 200px;
height: 200px;
border: 2px solid black;
outline: none;
font-size: 15px;
}
.center {
display: flex;
width: 620px;
}
.content {
display: none;
width: 196px;
margin-top: 1px;
}
.wrap {
display: inline-block;
flex: 1;
}

<h2>Collapsibles</h2>
<div class="center">
<div class="wrap">
<button type="button" class="collapsible">Section 1</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco               laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="wrap">
<button type="button" class="collapsible">Open Section 2</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="wrap">
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>