多个details手风琴如何实现首个默认展开、打开新项时其余自动关闭

实现方案 #

你只需要修改Liquid模板代码+新增一段JS脚本即可实现需求，不需要修改现有CSS：

第一步：修改HTML（Liquid）代码，实现首个手风琴默认展开 #

你当前的details是在Shopify的区块循环中输出的，只需要给首个details标签添加open判断即可：

<div class="product__accordion accordion" {{ block.shopify_attributes }}>
  <!-- 新增forloop判断，仅第一个区块的details加open属性 -->
  <details {% if forloop.first %}open{% endif %}>
    <summary>
      <div class="summary__title">
        {% render 'icon-accordion', icon: block.settings.icon %}
        <h2 class="h4 accordion__title">
          {{ block.settings.heading | default: block.settings.page.title }}
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte">
      {{ block.settings.content }}
      {{ block.settings.page.content }}
    </div>
  </details>
</div>

注：如果你当前的手风琴区块循环变量不是默认的forloop，替换为你实际的循环变量判断第一个项即可。

第二步：新增JS脚本，实现手风琴互斥展开 #

将以下脚本放到你主题的theme.liquid文件的</body>标签之前即可：

// 监听所有手风琴details的切换事件
document.querySelectorAll('.accordion details').forEach(detail => {
  detail.addEventListener('toggle', function() {
    // 仅当当前details被打开时触发互斥逻辑
    if (this.open) {
      // 关闭同组所有其他details
      document.querySelectorAll('.accordion details').forEach(otherDetail => {
        if (otherDetail !== this) otherDetail.open = false;
      })
    }
  })
})

可选优化：如果页面存在多组独立手风琴，不希望跨组互相影响，可以将JS选择器替换为更精确的父类选择器，比如.product__accordion details即可限定仅商品区手风琴生效。

效果验证 #

• 页面加载后仅第一个手风琴项默认展开
• 点击任意手风琴项的标题展开时，其余已展开的项会自动关闭
• 原有CSS的箭头旋转、样式效果完全兼容，不需要修改

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