除非我刷新頁面，否則集成在選項卡中的手風琴不起作用

Question

我試圖在選項卡中插入手風琴，但是當我單擊其他菜單並返回手風琴時，除非我刷新頁面，否則她的 javascript 無法工作。 你有解決方案嗎？（這對我來說真的很重要）。 我認為我需要在 javascript 中為自動刷新手風琴添加一行

您將在代碼下方看到。

問候

 // Get all Accordion and Panel let accHeading = document.querySelectorAll(".accordion"); let accPanel = document.querySelectorAll(".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;} /* Style the Headings that are used to open and close the accordion panel */.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; margin: 0; font-weight: 300; } /* Change color of the heading and icon (on hover and click) */.active, .accordion:hover, .accordion:hover::after { background-color: #007eff; color: white; } /* Add "plus" sign (+) after Accordion */.accordion::after { content: '\002B'; color: #777; font-weight: bold; float: right; } /* Add "minus" sign (-) after Accordion (when accordion is active) */.active::after { content: "\2212"; color: white; } /* Style the accordion panel */.accordion-panel { padding: 0 18px; overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; }

 <div style="border: 1px solid lightgray;"> <h2 class="accordion">Section 1</h2> <div class="accordion-panel"> <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> <h2 class="accordion">Section 2</h2> <div class="accordion-panel"> <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> <h2 class="accordion">Section 3</h2> <div class="accordion-panel"> <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> <h2 class="accordion">Section 4</h2> <div class="accordion-panel"> <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

您需要在 function 中設置您的 js 手風琴代碼並在加載和選項卡單擊事件中調用它