集成在选项卡中的手风琴不起作用，除非我刷新页面

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: '02B';
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

您需要在函数中设置js-acordoc代码，并在加载和选项卡点击事件中调用它