如果不使用JQuery,这可能吗?
它用于移动网站,但是页面始终处于脱机状态,所以我真的不想使用jquery。与自定义CSS样式相比,为jquery mobile提供自定义样式要困难得多。
label
checkbox
使所选项目保持打开状态并切换。
.collapse{ cursor: pointer; display: block; background: #cdf; } .collapse + input{ display: none; /* hide the checkboxes */ } .collapse + input + div{ display:none; } .collapse + input:checked + div{ display:block; } <label class="collapse" for="_1">Collapse 1</label> <input id="_1" type="checkbox"> <div>Content 1</div> <label class="collapse" for="_2">Collapse 2</label> <input id="_2" type="checkbox"> <div>Content 2</div>
radio
与复选框类似,它仅关闭已打开的复选框。在两个输入上 使用name="c1" type="radio"。
name="c1" type="radio"
.collapse{ cursor: pointer; display: block; background: #cdf; } .collapse + input{ display: none; /* hide the checkboxes */ } .collapse + input + div{ display:none; } .collapse + input:checked + div{ display:block; } <label class="collapse" for="_1">Collapse 1</label> <input id="_1" type="radio" name="c1"> <div>Content 1</div> <label class="collapse" for="_2">Collapse 2</label> <input id="_2" type="radio" name="c1"> <div>Content 2</div>
tabindex
:focus
与radio输入类似,您还可以使用Tab键触发状态。 在手风琴外部单击将关闭所有打开的项目。
Tab
.collapse > a{ background: #cdf; cursor: pointer; display: block; } .collapse:focus{ outline: none; } .collapse > div{ display: none; } .collapse:focus div{ display: block; } <div class="collapse" tabindex="1"> <a>Collapse 1</a> <div>Content 1....</div> </div> <div class="collapse" 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 class="collapse"> <a href="#targ_1">Collapse 1</a> <div id="targ_1">Content 1....</div> </div> <div class="collapse"> <a href="#targ_2">Collapse 2</a> <div id="targ_2">Content 2....</div> </div>
<detail>
<summary>
您可以使用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>