展开、收缩 details 标签
我的信息源网站，用到了 <details> 标签，当文章很多的时候，一个一个点击展开收缩很费劲，所以设计了一个按钮，来简化这个过程。（源码）
用到 @antfu 提供的图标网站 Icones，关于 DOM 操作和位置样式布局的一些知识。
第二步，在 JS 文件中写入 DOM 操作
1 const collapse =
2 '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--bi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path></svg>'
3 const expand =
4 '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--bi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path></svg>'
5 const details = document.querySelectorAll('.site-expander')
6 // .site-expander
7 const toggle_details = document.querySelector('.toggle-details')
8 console.log(details)
9
10 toggle_details.addEventListener('click', () => {
11 details.forEach((detail) => {
12 if (detail.hasAttribute('open')) {
13 detail.removeAttribute('open')
14 toggle_details.setHTML(expand)
15 } else {
16 detail.setAttribute('open', '')
17 toggle_details.setHTML(collapse)
18 }
19 })
20 })setHTML
目前还属于实验特性，Firefox
需要在 about:config 开启 dom.security.sanitizer.enabled ；Chrome
需要在 chrome://flags 开启 enable-experimental-web-platform-features
。
setHTML 的旧有实现：
1 toggle_details.innerHTML = expand使用 innerHTML 插入简单 HTML
片段没问题，如果需要插入的内容很多，要操作大量 DOM 节点的话，建议使用
HTML
<template>
和 JavaScript
document.importNode()1。
另外，以上代码在 Chrome 中只能展开收缩第一个 <details> 标签，但 在把 setHTML 换成 innerHTML 后就正常收缩展开全部 <details> 标签了 。
第三步，设置样式
1 .toggle {
2 position: fixed;
3 bottom: 2rem;
4 right: 2.7rem;
5 color: var(--base07);
6 background-color: var(--base06);
7 border: none;
8 cursor: pointer;
9 }
10 .toggle-details {
11 position: fixed;
12 bottom: 2rem;
13 right: 0;
14 color: var(--base07);
15 background-color: var(--base06);
16 border: none;
17 cursor: pointer;
18 }
19 @media screen and (max-width: 600px) {
20 .toggle {
21 right: 0;
22 bottom: 4.6rem;
23 border-top-left-radius: 15rem;
24 border-top-right-radius: 15rem;
25 border-top: 0.1rem solid #ff6550;
26 border-right: 0.1rem solid #ff6550;
27 border-left: 0.1rem solid #ff6550;
28 }
29 .toggle-details {
30 border-bottom-right-radius: 15rem;
31 border-bottom-left-radius: 15rem;
32 border-right: 0.1rem solid #ff6550;
33 border-bottom: 0.1rem solid #ff6550;
34 border-left: 0.1rem solid #ff6550;
35 }
36 }