details标签应用举例 转自《马黑博客》

admin

https://mahei.ccccocccc.cc/art/?st=1&id=1770097024

<details> 是 HTML5 引入的交互式标签，通常与 <summary> 配合使用，后者以其子元素出现，起概括、归纳作用，同级子元素如 <div> 或 <p> 等则为折叠起来的详细内容，点击了 summary 元素它们会展开。演示如下：

了解 details 标签

HTML <details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。展现组件通常在屏幕上使用一个小三角形，旋转（或扭转）以表示打开/关闭的状态，三角形旁边有一个标签。<summary> 元素的内容被用来作为展示小部件的标签。

【注】英文 details 意为“细节”，summary 意思是“概要”。

演示例子的代码结构如下：

details标签代码举例

<details open>
    <summary>概要</summary>
    <div>
        详细内容……
      （除了 div 元素，还可以使用其他各类常规标签来组织详细内容）
    </div>
</details>

代码演示是自动展开的，因为我在 details 元素的HTML代码中使用了 opne 属性，该属性用于展开 details 元素折叠起来的所有内容。事实上，details 元素就是通过 open 属性来操作标签具体内容的折叠与展开，一切都已经封装好，无需通过 JS 对之进行交互管理。这不意味着对 details 元素的相关管理是多余的，相反，JS 同样对之大有作为，例如本文的 summary 元素的标题提示语就是由 JS 动态实现的，看代码：

JS动态管理summary的title属性

const detailsElms = document.querySelectorAll('.artBox details');

detailsElms.forEach(details => {
    const summary = details.querySelector('summary');
    summary.title = '点击展开';
    details.addEventListener('toggle', () => {
        summary.title = details.open ? '点击收回' : '点击展开';
    });
});	

这里，监听 .artBox 标签下所有 details 元素的 toggle 事件，当其 open 属性触发，summary 元素的 title 属性值为“点击收回”，否则为“点击展开”。title 属性值的动态管理意在提升交互友好性，尽管 details 元素自身的三角形指示按钮已具备足够的信息量。JS 针对 details 元素能做的不止这些，这需要在实际应用中根据实际需求而定。

另外，可以为 details 元素及其子元素设置相应的 CSS 样式，如果有必要的话。本文的 details 标签和其元素 summary 标签都做了简单的 CSS 设置：

details和summary的CSS设置

.artBox details {
    margin: 20px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 0 4px gray;
    position: relative;
}

.artBox summary {
    padding: 4px 8px;
    background: #eee;
    cursor: pointer;
}

对 details 标签下的其他标签，同样也可以做相应的CSS设置。