並排的手風琴向左走

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 部分時，它首先在右側打開.. 我（還）沒有答案！