并排的手风琴向左走

Question

我有一个并排的手风琴，但问题是当我打开右侧的第一个手风琴（第 5 节）时，它会在下面（第 4 节）底部，但我不想要这个，而且什么时候该页面将在浏览器中打开，它应该位于（第 4 节）下方。 在左边。 我尝试使用不同的代码....有不同的不同问题即将出现。

链接在这里

https://codepen.io/soumenework/full/gOGwmaP

 // Get all Accordion and Panel let accHeading = document.querySelectorAll(".ttb.accordion"); let accPanel = document.querySelectorAll(".ttb.accordion-panel"); for (let i = 0; i < accHeading.length; i++) { // Execute whenever an accordion is clicked accHeading[i].onclick = function() { if (this.nextElementSibling.style.maxHeight) { hidePanels(); // Hide All open Panels } else { showPanel(this); // Show the panel } }; } // Function to Show a Panel function showPanel(elem) { hidePanels(); elem.classList.add("active"); elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px"; } // Function to Hide all shown Panels function hidePanels() { for (let i = 0; i < accPanel.length; i++) { accPanel[i].style.maxHeight = null; accHeading[i].classList.remove("active"); } }

 * {box-sizing: border-box;}.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; margin: 0; font-weight: 300; }.active, .accordion:hover, .accordion:hover::after { background-color: #007eff; color: white; }.ttb.accordion::after { content: '\002B'; color: #777; font-weight: bold; float: right; }.ttb.active::after { content: "\2212"; color: white; }.accordion-panel { padding: 0 18px; overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; }.dw { box-sizing: border-box; -moz-column-gap: 0; column-gap:10px; -moz-column-count: 2; column-count: 2; }.dw-pnl { -moz-column-break-inside: avoid; break-inside: avoid; } @media (max-width: 768px) {.dw { -moz-column-count: 1; column-count: 1; } }

 <div class="dw"> <div class="dw-pnl dw-pnl--fcs ttb "> <h2 class="accordion active">Section 1</h2> <div class="accordion-panel" style="max-height: 68px;"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 2</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 3</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 4</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 5</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 6</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb"> <h2 class="accordion ">Section 7</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb no_opcity"> <h2 class="accordion ">Section 8</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb no_opcity"> <h2 class="accordion ">Section 9</h2> <div class="accordion-panel"> <p>aaa 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="dw-pnl dw-pnl--fcs ttb no_opcity"> <h2 class="accordion ">Section 10</h2> <div class="accordion-panel"> <p>aaa 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>

请帮忙谢谢

Answer 1

似乎第 5 节从右侧开始的问题是因为 > break-inside: Avoid; < 在第 54 行的 css 代码中

尝试将其更改为自动或其他！

似乎当打开第 5 部分时，它首先在右侧打开.. 我（还）没有答案！