Shopify中使用原生标签实现手风琴组件时，默认行为会导致点击一个面板后其他已展开的面板自动收起；本文提供纯CSS/JS兼容方案，确保各面板状态完全独立，并附可直接复用的代码示例。
shopify中使用原生``标签实现手风琴组件时，默认行为会导致点击一个面板后其他已展开的面板自动收起；本文提供纯css/js兼容方案，确保各面板状态完全独立，并附可直接复用的代码示例。
在 Shopify 主题中，许多开发者倾向于使用原生 和 标签构建轻量级手风琴（Accordion）组件——它语义清晰、无需额外依赖且天然支持无障碍访问。但一个常见误区是：原生
元素本身并不具备“多面板并行展开”能力。当页面中存在多个 时，浏览器默认不会限制其 open 状态，真正导致“点击第一个，第二个自动关闭”的原因，往往来自 CSS 或 JavaScript 的隐式干预（例如全局监听、强制重置、或错误的 :not([open]) 样式覆盖）。
从你提供的代码可见，当前结构是标准的 Liquid 循环渲染多个 块，逻辑上应彼此独立。问题根源极可能出在以下两处之一：
-
CSS 中存在影响所有 的通用规则（如 details:not([open]) { display: none; } 或通过 JS 动态添加的 class 冲突）；
- 页面中已加载的第三方脚本（如主题自带的 accordion 初始化逻辑）劫持了原生行为，强制实现“单开模式”。
✅ 正确解法：移除干扰逻辑，显式启用多开支持
✅ 推荐方案：纯 HTML/CSS + 轻量 JS 控制（兼容 Shopify）
1. 保持 Liquid 结构不变（已正确）
{% for block in section.blocks %}
<div class="product__accordion accordion">
<details id="Details-{{ block.id }}" data-accordion-item><summary><div class="summary__title">
<h2 class="h4 accordion__title inline-richtext">{{ block.settings.title }}</h2>
</div>
<svg aria-hidden="true" focusable="false" viewbox="0 0 10 10" class="icon icon-caret" style="width: 15px;"><rect x="1" y="4" width="8" height="2" fill="currentColor"></rect><rect x="4" y="1" width="2" height="8" fill="currentColor"></rect></svg></summary><div class="accordion__content rte">
{{ block.settings.content }}
</div>
</details>
</div>
{% endfor %}
2. 修复关键 CSS（移除潜在冲突样式）
请检查并删除类似以下危险规则：
/* ❌ 错误：强制所有未 open 的 details 隐藏（破坏原生行为） */
details:not([open]) { display: none !important; }
/* ❌ 错误：JS 注入的 .is-closed 类全局重置 */
details.is-closed { height: 0; overflow: hidden; }
✅ 替代为安全、渐进增强的样式：
.accordion details {
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.accordion details summary {
list-style: none;
cursor: pointer;
padding: 12px 0;
}
.accordion details[open] summary {
margin-bottom: 8px;
}
.accordion__content {
padding: 0 0.6rem 1.5rem;
line-height: 1.6;
}
.accordion details[open] .icon-caret {
transform: rotate(135deg);
}
3. 如需 JS 增强（例如动画、事件追踪），使用无侵入式脚本
将以下代码放入 theme.liquid 底部或自定义 .js 文件中（避免与主题原有逻辑冲突）：
<script>
document.addEventListener('DOMContentLoaded', function() {
// 仅处理明确标记 data-accordion-item 的 details
document.querySelectorAll('details[data-accordion-item]').forEach(details => {
details.addEventListener('toggle', function(e) {
// 可选：发送 GA 事件或触发动画
if (this.open) {
console.log('Accordion opened:', this.id);
}
});
});
});
</script>
⚠️ 注意事项：
- 不要调用 detailsElement.open = false 或遍历其他 details 元素手动关闭 —— 这正是导致“连锁关闭”的元凶；
- Shopify Online Store 2.0 主题中，部分模板会内置 section.js 自动初始化 Accordion，若启用，请在对应 JS 中搜索 querySelectorAll('details') 并注释掉 closeOthers() 类逻辑；
- 若仍异常，可通过浏览器 DevTools → Elements 面板右键点击任意
→ “Break on” → “attribute modifications”，实时捕获谁在修改 open 属性。
? 总结：原生 天然支持多开，所谓“只能单开”从来不是浏览器限制，而是人为叠加的逻辑副作用。回归语义化、精简 CSS、谨慎使用 JS，即可让每个手风琴面板真正独立响应用户操作——简洁即强大。
