# 展开、收缩 details 标签
我的信息源网站，用到了
[<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
标签，当文章很多的时候，一个一个点击展开收缩很费劲，所以设计了一个按钮，来简化这个过程。（[源码](https://github.com/tianheg/feed)）
用到 @antfu 提供的图标网站 [Icones](https://icones.js.org/)，关于 DOM
操作和位置样式布局的一些知识。
### 第一步，在 HTML 模板里放 button 标签 {#第一步-在-html-模板里放-button-标签}
```
```
### 第二步，在 JS 文件中写入 DOM 操作 {#第二步-在-js-文件中写入-dom-操作}
```javascript
const collapse =
''
const expand =
''
const details = document.querySelectorAll('.site-expander')
// .site-expander
const toggle_details = document.querySelector('.toggle-details')
console.log(details)
toggle_details.addEventListener('click', () => {
details.forEach((detail) => {
if (detail.hasAttribute('open')) {
detail.removeAttribute('open')
toggle_details.setHTML(expand)
} else {
detail.setAttribute('open', '')
toggle_details.setHTML(collapse)
}
})
})
```
`setHTML`
目前还属于[实验特性](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML)，Firefox
需要在 about:config 开启 `dom.security.sanitizer.enabled` ；Chrome
需要在 chrome://flags 开启 `enable-experimental-web-platform-features`
。
`setHTML` 的旧有实现：
```javascript
toggle_details.innerHTML = expand
```
使用 `innerHTML` 插入简单 HTML
片段没问题，如果需要插入的内容很多，要操作大量 DOM 节点的话，建议使用
HTML
[<template>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
和 JavaScript
[`document.importNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode)[^1]。
另外，以上代码在 Chrome 中只能展开收缩第一个 <details> 标签，但 *在把
setHTML 换成 innerHTML 后就正常收缩展开全部 <details> 标签了* 。
### 第三步，设置样式 {#第三步-设置样式}
```css
.toggle {
position: fixed;
bottom: 2rem;
right: 2.7rem;
color: var(--base07);
background-color: var(--base06);
border: none;
cursor: pointer;
}
.toggle-details {
position: fixed;
bottom: 2rem;
right: 0;
color: var(--base07);
background-color: var(--base06);
border: none;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.toggle {
right: 0;
bottom: 4.6rem;
border-top-left-radius: 15rem;
border-top-right-radius: 15rem;
border-top: 0.1rem solid #ff6550;
border-right: 0.1rem solid #ff6550;
border-left: 0.1rem solid #ff6550;
}
.toggle-details {
border-bottom-right-radius: 15rem;
border-bottom-left-radius: 15rem;
border-right: 0.1rem solid #ff6550;
border-bottom: 0.1rem solid #ff6550;
border-left: 0.1rem solid #ff6550;
}
}
```
[^1]: [Using innerHTML, and what are security concerns?](https://stackoverflow.com/a/47945729/12539782)