这个问题的解决方案是使用纯 CSS 进行展开和折叠
HTML 代码
<body>
<section>
<article>
<details>
<summary>Step by Step Guides</summary>
<details>
<summary>Getting Started</summary>
<p>1. Signup for a free trial</p>
</details>
<details>
<summary>Setting up a backup schedule</summary>
<p>This step assumes you have already signed up and installed the software</p>
</details>
</details>
<details>
<summary>Installation/Upgrade Issues</summary>
<p>After setup the program doesn't start</p>
</details>
</article>
<article>
<details>
<summary>SERVER Step by Step Guides</summary>
<details>
<summary>Getting Started</summary>
<p>1. Signup for a free trial</p>
</details>
<details>
<summary>Setting up a backup schedule</summary>
<p>This step assumes you have already signed up and installed the software</p>
</details>
</details>
<details>
<summary>Installation/Upgrade Issues</summary>
<p>After setup the program doesn't start</p>
</details>
</article>
</section>
</body>
CSS 代码
summary::-webkit-details-marker {
color: #00ACF3;
font-size: 125%;
margin-right: 2px;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 28px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 16px;
}
Jsfiddle上的工作代码