并排显示折叠部分

Question

我目前正在使用 HTML、CSS 和 vanilla JavaScript 开发一个投资组合网站，我正在处理一些点击时会折叠的部分。 正如您在代码片段中看到的，折叠部分是一个在另一个之上。 我想将按钮并排放置，但我不知道该怎么做。 我对这些语言还很陌生，因为我一个月前才开始。

 document.querySelectorAll(".collapse__button").forEach(button =>{ button.addEventListener("click", () =>{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; }else{ collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "\\25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "\\25b4"; } .Title{ text-align: center; }

 <section class = "Title"> <p> Title of Example</p> <div class = "collapse"> <button class = "collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class = "collapse"> <button class = "collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div>

Answer 1

 document.querySelectorAll(".collapse__button").forEach(button =>{ button.addEventListener("click", () =>{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; }else{ collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "\\25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "\\25b4"; } .Title{ text-align: center; } .container { display: flex; }

 <section class = "Title"> <p> Title of Example</p> <div class="container"> <div class = "collapse"> <button class = "collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class = "collapse"> <button class = "collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div> </div>

你做得很好。 只需用一个 div 容器包裹你的两个折叠部分（也称为手风琴组件），并在 CSS flexbox 中制作该容器。 我在你的代码中为你做的。 JS 我不必碰。 希望这可以帮助。

Answer 2

尝试创建另一个包含示例 1 和示例 2 的 div。在容器内将其显示为 FlexBox。 这应该使他们并排。

这是我所做的：

如果您有任何问题，请告诉我

 document.querySelectorAll(".collapse__button").forEach(button =>{ button.addEventListener("click", () =>{ const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")){ collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; }else{ collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em ; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } .collapse__button:hover{ transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after{ content: "\\25be"; float: right; transform: scale(1); } .collapse__content{ overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after{ content: "\\25b4"; } .Title{ text-align: center; } .container { display: flex; justify-content: center; }

 <section class = "Title"> <p> Title of Example</p> <div class="container"> <div class = "collapse"> <button class = "collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class = "collapse"> <button class = "collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div> </div> </section>

Answer 3

如果您不想使用 Flexbox，您可以使用 display:table 来实现。

display:table 是这样工作的：

它就像一张实际的桌子； 然而; 表格具有语义意义，不应用于布局。 例如，请考虑使用表格进行布局的不良实践代码：

 .topbar { background-color: blue; color:white; width: 100%; }

 <table class="topbar"> <tr> <td>Site Name</td> <td><label>Search: <input type="search" /></label></td> </tr> </table>

它看起来像一个顶部栏，但屏幕阅读器可能会将它与保存实际数据的表格混淆。

 document.querySelectorAll(".collapse__button").forEach(button => { button.addEventListener("click", () => { const collapseContent = button.nextElementSibling; button.classList.toggle("collapse__button--active"); if (button.classList.contains("collapse__button--active")) { collapseContent.style.maxHeight = collapseContent.scrollHeight + "px"; } else { collapseContent.style.maxHeight = 0; } }); });

 .collapse__button { /* display: inline-block; */ padding: 1em 2em; background: var(--clr-dark); color: var(--clr-light); text-decoration: none; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: var(--fw-bold); transition: transform 200ms ease-in-out; max-width: 200px; margin: 5em 5em; border: 8px var(--clr-accent); border-radius: 20px; } #wrapper { display: table; } .container { display: table-row; } .collapse { display: table-cell; } .collapse__button:hover { transform: scale(1.1); background: var(--clr-accent); } .collapse__button::after { content: "\\25be"; float: right; transform: scale(1); } .collapse__content { overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; } .collapse__button--active::after { content: "\\25b4"; } .Title { text-align: center; }

 <section class="Title"> <p> Title of Example</p> <div id="wrapper"> <div class="container"> <div class="collapse"> <button class="collapse__button"> Example 1 </button> <div class="collapse__content"> <p> writing </p> </div> </div> <div class="collapse"> <button class="collapse__button"> Example 2 </button> <div class="collapse__content"> <p> more writing </p> </div> </div> </div> </div> </section>