关闭手风琴时如何自动关闭手风琴内部的所有可折叠元素？

手风琴（Accordion）是一种常见的网页界面元素，具有节省空间、内容整齐、易于使用等特点。它包含一个或多个折叠元素（Collapsible Element），这些元素可在展开和折叠状态之间切换。

当用户关闭手风琴时，通常需要自动关闭内部的所有可折叠元素。下面介绍几种实现该功能的方法。

使用 JavaScript

要实现关闭手风琴时自动关闭内部的所有可折叠元素，可以使用 JavaScript。下面是一个示例代码：

const accordion = document.querySelector('.accordion');
const collpsibles = accordion.querySelectorAll('.collapsible');

accordion.addEventListener('click', (event) => {
  const target = event.target;
  if (target.classList.contains('collapser')) {
    for (const collapsible of collpsibles) {
      if (collapsible !== target.parentElement) {
        collapsible.classList.remove('expanded');
      }
    }
  }
});

该代码首先获取手风琴的 DOM 元素和所有可折叠元素的 DOM 元素，然后在手风琴的 click 事件中判断当前点击的元素是否是 collapser，如果是，则遍历所有可折叠元素，将除当前元素之外的所有元素的 expanded 类名移除。

使用 CSS

除了使用 JavaScript 外，还可以使用 CSS 来实现自动关闭内部的所有可折叠元素。下面是一个示例代码：

.accordion .collapsibles:not(:target) {
  display: none;
}

该代码使用 :target 伪类选择器，选择当前被点击的可折叠元素以外的所有可折叠元素。然后将这些元素的 display 样式设置为 none，使其在关闭手风琴时自动关闭。

使用 jQuery

如果项目中使用了 jQuery，可以使用 jQuery 的代码实现自动关闭内部的所有可折叠元素。下面是一个示例代码：

$('.accordion .collapsible .collapser').click((event) => {
  const collapsibles = $('.accordion .collapsible').not($(event.target).parent());
  collapsibles.removeClass('expanded');
});

该代码使用了 jQuery 选择器来选择手风琴和可折叠元素，然后在 click 事件中判断当前点击的元素是否是 collapser，如果是，则将除当前元素之外的所有元素的 expanded 类名移除。

总之，关闭手风琴时自动关闭内部的所有可折叠元素可以使用多种方式实现，如使用 JavaScript、CSS、jQuery 等。选择最适合自己项目的方法进行实现即可。