Lion Accordion组件：选中新面板时关闭已开面板的问题求助

要实现点击新面板时自动关闭已打开的面板，核心是启用的单面板互斥模式，以下是两种实现方式：

方式一：使用内置single属性（推荐） #

原生支持通过single属性开启手风琴模式，启用后会自动管理面板状态，实现点击新面板时自动折叠其他已展开的面板。修改代码如下：

<lion-accordion single>
  <h3 slot="invoker">
    <button>Sensory Factors</button>
  </h3>
  <div slot="content" class="lion-paragraph-container">
    <p>
     Content A
    </p>
  </div>
  <h3 slot="invoker">
    <button>Nutritional value</button>
  </h3>
  <div slot="content">
    Content B
  </div>
</lion-accordion>

方式二：自定义JS逻辑（适合特殊场景） #

如果需要添加额外的切换逻辑（比如部分面板允许同时展开），可以通过监听lion-accordion-changed事件手动控制面板状态：

const accordion = document.querySelector('lion-accordion');
accordion.addEventListener('lion-accordion-changed', (e) => {
  const activeItem = e.detail.item;
  // 遍历所有面板，关闭非当前激活的项
  accordion.items.forEach(item => {
    if (item !== activeItem && item.opened) {
      item.opened = false;
    }
  });
});

内容的提问来源于stack exchange，提问作者John