如何在页面加载时关闭所有折叠面板？

嘿，我来帮你搞定页面加载时关闭所有折叠面板的问题～

首先看了你的HTML结构，推测你的折叠内容是.content下的.card元素对吧？下面给你两种实用的实现方法，根据你的实际场景选就行：

方法一：原生JavaScript（无依赖） #

直接在页面加载完成后，选中所有需要折叠的元素并隐藏它们：

window.onload = function() {
  // 选中所有.content下的.card折叠元素
  const collapseCards = document.querySelectorAll('.content .card');
  
  collapseCards.forEach(card => {
    // 直接设置为隐藏，如果你是用CSS类控制显示/隐藏，也可以换成添加/移除类
    card.style.display = 'none';
    
    // 举个例子，如果你的项目用了自定义的hidden类，就这么写：
    // card.classList.add('hidden');
  });
};

方法二：如果你用Bootstrap折叠组件 #

如果你的折叠面板是用Bootstrap的collapse组件实现的（常见场景），那可以用框架自带的方法来统一关闭：

window.onload = function() {
  // 选中所有折叠面板并调用hide方法
  const collapseElements = document.querySelectorAll('.collapse');
  
  collapseElements.forEach(el => {
    // 移除展开状态的show类
    el.classList.remove('show');
    // 找到对应的触发按钮，更新aria-expanded属性（无障碍优化）
    const triggerBtn = document.querySelector(`[data-bs-target="#${el.id}"]`);
    if (triggerBtn) {
      triggerBtn.setAttribute('aria-expanded', 'false');
    }
  });
  
  // 如果你用jQuery+Bootstrap，还能更简洁：
  // $(window).on('load', function() {
  //   $('.collapse').collapse('hide');
  // });
};

把上面的代码放到你的HTML页面的<script>标签里（最好放在</body>标签前），页面加载完成后所有折叠面板就会自动关闭啦～

内容的提问来源于stack exchange，提问作者Ömer Doğan