选择折叠面板中的缺省打开行

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">行1</div>
    <div class="accordion-content">内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">行2</div>
    <div class="accordion-content">内容2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">行3</div>
    <div class="accordion-content">内容3</div>
  </div>
</div>

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

.accordion-header {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

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

// 获取所有折叠面板的行和内容元素
const accordionItems = document.querySelectorAll('.accordion-item');
const accordionContents = document.querySelectorAll('.accordion-content');

// 遍历每个折叠面板的行和内容元素
accordionItems.forEach((item, index) => {
  const header = item.querySelector('.accordion-header');
  const content = accordionContents[index];

  // 添加点击事件监听器
  header.addEventListener('click', () => {
    // 切换内容的显示状态
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  });

  // 设置缺省打开行
  if (index === 0) {
    content.style.display = 'block';
  }
});