使用label
和checkbox
输入
使所选项目保持打开状态并切换。
.collapse{ cursor: pointer; display: block; background: #cdf;}.collapse + input{ display: none; }.collapse + input + div{ display:none;}.collapse + input:checked + div{ display:block;}<label for="_1">Collapse 1</label><input id="_1" type="checkbox"><div>Content 1</div><label for="_2">Collapse 2</label><input id="_2" type="checkbox"><div>Content 2</div>使用label
和命名radio
输入
与复选框类似，它仅关闭已打开的复选框。在两个输入上
使用
name="c1" type="radio"。
.collapse{ cursor: pointer; display: block; background: #cdf;}.collapse + input{ display: none; }.collapse + input + div{ display:none;}.collapse + input:checked + div{ display:block;}<label for="_1">Collapse 1</label><input id="_1" type="radio" name="c1"><div>Content 1</div><label for="_2">Collapse 2</label><input id="_2" type="radio" name="c1"><div>Content 2</div>使用tabindex
和:focus
与
radio输入类似，您还可以使用
Tab键触发状态。
在手风琴外部单击将关闭所有打开的项目。
.collapse > a{ background: #cdf; cursor: pointer; display: block;}.collapse:focus{ outline: none;}.collapse > div{ display: none;}.collapse:focus div{ display: block;}<div tabindex="1"> <a>Collapse 1</a> <div>Content 1....</div></div><div tabindex="1"> <a>Collapse 2</a> <div>Content 2....</div></div>使用 :target
与使用
radio输入类似，您还可以使用
Tab和
⏎键进行操作
.collapse a{ display: block; background: #cdf;}.collapse > div{ display:none;}.collapse > div:target{ display:block;}<div > <a href="#targ_1">Collapse 1</a> <div id="targ_1">Content 1....</div></div><div > <a href="#targ_2">Collapse 2</a> <div id="targ_2">Content 2....</div></div>使用<detail>
和<summary>
标记（纯HTML）
您可以使用HTML5的detail和summary标签来解决此问题，而无需任何CSS样式或Javascript。请注意，Internet
Explorer不支持这些标签。
<details> <summary>Collapse 1</summary> <p>Content 1...</p></details><details> <summary>Collapse 2</summary> <p>Content 2...</p></details>
