我展开一行后手风琴立即崩溃

如何解决我展开一行后手风琴立即崩溃

我正在SharePoint网站上使用Accordion创建一个下拉表。我引用了此页面（P.S.我讨厌W3Schools）https://www.w3schools.com/w3css/w3css_accordions.asp#:~:text=An%20accordion%20is%20used%20to%20show%20%28and%20hide%29,of%20button%20to%20open%20and%20close%20the%20content%3A

每次我在SharePoint上展开一行时，页面都会刷新并立即折叠该行。当我在JSfiddle或此代码段中执行此操作时，它工作正常。为什么会这样。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click",function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.5s;
}

.active,.accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
h2{
    text-align: center;
    font-size: 20px;
    font-weight: bold;

}
.prevIoUs {
  background-color: #104723;
  color: #b3ab7d;
}
a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}
a:link,a:visited,a:hover {
    color: #b3ab7d;
}

.backbtn{
text-align: left;
}

<body>

<h2>System and information Integrity (SI)</h2>

<button class="accordion">SI.1.210 Identify,report,and correct information and information system flaws in a timely manner.</button>
<div class="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>

<button class="accordion">SI.1.211 Provide protection from malicIoUs code at appropriate locations within organizational information systems.</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">S1.1.212 Update malicIoUs code protection mechanisms when new releases are available.</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">SI.1.213 Perform periodic scans of the information system and real-time scans of files from external sources as files are downloaded,opened,or executed</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="backbtn">
<a href="#" class="prevIoUs">&laquo; Go Back</a>
</div>

</body>

解决方法

您的代码可在Codepen上使用。如果问题仅在于页面刷新，则将以下内容添加到click事件监听器中：

event.preventDefault;

之前

this.classList.toggle("active");