原文地址：http://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/
注：本文只有原文部分內容，且對內容有過修改，需要看原文請移步上方連接 ↑↑↑
<details> 標籤是 HTML5 中的新標籤，目前瀏覽器支持程度有所欠缺，最新支持情況可以點擊https://caniuse.com
<details>標籤的默認摺疊展開效果
摺疊效果是通過在<details>標籤中添加open標籤來控制摺疊或展開的，有open則展開，去掉則摺疊
<details>
<summary>標題</summary>
<div>
隱藏的內容
</div>
</details>
<details open>
<summary>標題</summary>
<div>
隱藏的內容
</div>
</details>如此看來，應用的場景還是比較多的，但是三角圖標的外觀一般美工也不會設計成這個樣子，但是可以通過修改樣式來改變此圖標
1、修改<details>三角形圖標
實際上實際開發的時候，對小三角UI更便捷的定製方法是：隱藏瀏覽器原生的小三角，然後藉助
::before或::after僞元素重新生成我們想要的UI效果，下面這個案例就將展示相關的處理在Chrome等瀏覽器下使用
::-webkit-details-marker，在Firefox瀏覽器下使用::-moz-list-bullet可以對小三角進行UI控制，例如改變顏色，改變大小，使用自定義的圖形代替，或者直接隱藏等在Chrome瀏覽器下，我們可以直接設置
display:none進行隱藏，但是這一招在Firefox瀏覽器下確實沒有效果的，即使設置display:none!important也是如此，根據我的測試，只有font-size:0能夠比較完美的隱藏。類似position:absolute;visibility:hidden這種常見的隱藏也是不行的，因爲position:absolute無法生效。以下是修改後效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 隱藏默認三角 chrome Safari*/
details ::-webkit-details-marker {
display: none;
}
/*隱藏默認三角 Firefox*/
details ::-moz-list-bullet {
font-size: 0;
}
/* 自定義的三角 */
details:not([open]) summary::before {
margin-left: -1.2em;
transform: rotate(90deg);
}
details summary::before {
content: '';
position: absolute;
width: 1em;
height: 1em;
margin-top: .1em;
margin-left: -1.2em;
background: url(http://www.zhangxinxu.com/study/201801/arrow-on.svg) no-repeat;
background-size: 100% 100%;
transform: rotate(180deg);
transition: transform .2s;
}
/*取消可以選定*/
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
margin-left: 1.1em;
}
summary {/*去掉標題的外邊框*/
outline: 0;
}
/*標題內嵌套<a>標籤目的是讓其可以選定，且使其選定後外邊框不會選定一整行。可以看到默認情況下，選中或者點擊後是有個外邊框的，且佔據一整行十分不美觀*/
summary a {
color: inherit;
text-decoration: none;
pointer-events: none;
}
details>content {
display: block;
padding-left: 20px;
}
</style>
</head>
<body>
<details>
<summary><a href="javascript:;" onClick="this.parentNode.click();">一、級標籤</a></summary>
<content>
這是內容
<br>這是隱藏的內容
<br>這是隱藏的內容
<br>這是隱藏的內容
<br>這是隱藏的內容
<br>這是隱藏的內容
</content>
</details>
</body>
</html>使用<details>可以實現我們平常常見的一些功能，如菜單下拉、樹形結構等。
2、<details>標籤實現樹形結構
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 隱藏默認三角 chrome Safari*/
details ::-webkit-details-marker {
display: none;
}
/*隱藏默認三角 Firefox*/
details ::-moz-list-bullet {
font-size: 0;
}
/* 自定義的三角 */
details:not([open]) summary::before {
margin-left: -1.2em;
border: 1px solid #999;
background: linear-gradient(to right, #999, #999) no-repeat center,linear-gradient(to bottom, #999, #999) no-repeat center;
background-size: 10px 2px,2px 10px;
}
details summary::before {
content: '';
position: absolute;
width: 1em;
height: 1em;
margin-left: -1.2em;
border: 1px solid #999;
background: linear-gradient(to right, #999, #999) no-repeat center;
background-size: 10px 2px;
}
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
margin-left: 1.1em;
}
summary {
outline: 0;
}
summary a {
color: inherit;
text-decoration: none;
pointer-events: none;
}
details,summary{
margin-bottom: 2px;
}
details>details,details>content {/*調整下縮進*/
display: block;
padding-left: 20px;
}
</style>
</head>
<body>
<details>
<summary><a href="javascript:;" onClick="this.parentNode.click();">一、級標籤</a></summary>
<details>
<summary><a href="javascript:;" onClick="this.parentNode.click();">1、OPTION</a></summary>
<content>a選項
<br> b選項
<br> c選項
</content>
</details>
<details>
<summary><a href="javascript:;" onClick="this.parentNode.click();">2、OPTION</a></summary>
<content>a選項
<br>b選項
<br>c選項
</content>
</details>
</details>
<details>
<summary><a href="javascript:;" onClick="this.parentNode.click();">一、級標籤</a></summary>
<details>
<summary><a href="javascript:;" onClick="this.parentNode.click();">1、OPTION</a></summary>
<content>a選項
<br> b選項
<br> c選項
</content>
</details>
<details>
<summary><a href="javascript:;" onClick="this.parentNode.click();">2、OPTION</a></summary>
<content>a選項
<br>b選項
<br>c選項
</content>
</details>
</details>
</body>
</html>