如何在页面加载时保持打开手风琴面板，而在页面加载后保持其可折叠？

<div class="accordion">
  <div class="panel">
    <div class="panel-header">面板1</div>
    <div class="panel-content">面板1的内容</div>
  </div>
  <div class="panel">
    <div class="panel-header">面板2</div>
    <div class="panel-content">面板2的内容</div>
  </div>
  <div class="panel">
    <div class="panel-header">面板3</div>
    <div class="panel-content">面板3的内容</div>
  </div>
</div>

.panel {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.panel-header {
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
}

.panel-content {
  display: none;
  padding: 10px;
}

window.addEventListener('DOMContentLoaded', function() {
  // 在页面加载时保持某个面板打开
  var panelToOpen = document.querySelector('.panel:nth-child(2)'); // 假设打开第二个面板
  panelToOpen.classList.add('open');

  // 在页面加载后保持手风琴面板的可折叠状态
  var panels = document.querySelectorAll('.panel');
  panels.forEach(function(panel) {
    var header = panel.querySelector('.panel-header');
    header.addEventListener('click', function() {
      panel.classList.toggle('open');
    });
  });
});