心得分享

有些时候，需要在产品页或者博客中插入一些手风琴结构，让页面看起来更统一简洁。我们只需简单的HTML代码即可实现这个功能。

我们只需使用<details>和<summary>标签。

<details>标签在HTML中用于创建一个可以展开和折叠的内容区域，通常用来隐藏默认不显示的细节信息或者额外的内容。用户可以通过点击来展开或折叠这个区域，以显示或隐藏信息。这个标签通常和<summary>标签一起使用，<summary>标签用于为<details>标签提供一个可见的概览或标题。

基本使用

下面是<details>标签的一个基本示例：

<details>
  <summary>点击查看更多信息</summary>
  这里是被隐藏的内容，只有在用户点击标题时才会显示出来。
</details>

在这个例子中，<summary>标签定义了当内容被隐藏时显示的标题（”点击查看更多信息”）。当用户点击这个标题时，它下面的内容（”这里是被隐藏的内容，只有在用户点击标题时才会显示出来。”）会展开显示。

布尔属性

<details>标签支持全局属性，但是还有一个特定于此标签的布尔属性：open

当此属性存在时，细节内容默认将会展开显示，而不是折叠隐藏。

<details open>
  <summary>默认显示的信息</summary>
  这部分内容在页面加载时就会显示，因为`open`属性已经被设置。
</details>

在这个示例中，因为<details>标签包含了open属性，所以内容区域会在页面加载时自动展开，而不需要用户点击<summary>标签。

更复杂的运用示例

上面说到的只是简单的运用, 显示效果一般, 而且关闭标签时不会自动返回打开位置.

使用下面的代码实现更复杂的功能

1. 展开以后最右下角显示红色X号;
2. 点击关闭以后返回关闭位置.

details.aaa { /* 特别样式aaa,可以自定义其他文字 */
    position: relative;
    padding: 5px 0;
}

details.ytb[open]>summary::after {
    display: inline-block;
    content: "15"; /* Unicode for ❌ */
    position: absolute;
    right: 0;
    bottom: 0;
    color: red;       /* 设置表情符号颜色为红色 */
    font-weight: bold; /* 设置表情符号为加粗 */
}

在theme.css.liquid中增加代码, 实现左下角显示红X.

<script>
function addDetailsToggleListener() {
    var detailsElements = document.querySelectorAll('details.ytb');

    detailsElements.forEach(function(details) {
        details.addEventListener('toggle', function(event) {
            if (!event.target.open) { // 当 <details> 被关闭时
                var summary = event.target.querySelector('summary');
                summary.scrollIntoView({ behavior: 'smooth' }); // 平滑地滚动到 <summary> 的位置
            }
        });
    });
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', addDetailsToggleListener);
} else {
    addDetailsToggleListener();
}
</script>

上面的这些代码实现点击关闭以后返回关闭位置,如果你文字内容较短可以不使用这写代码.

这些可以放只在多个地方,如果只想在产品页面上实现,则在main-product.liquid增加.

如果想全局实现,则可放在theme.liquid</body>标签之前. 或者在Shopify主题的assets目录新建一个JavaScript文件（例如，命名为custom.js）, 然后在theme.liquid中引用它，代码应该像这样：

<script src="{{ 'custom.js' | asset_url }}"></script>

这行代码同样放在theme.liquid文件中的</body>标签之前。