问题描述
我想要的东西非常类似于Theming collapsible headers位于这里:
没有使用JQuery,这是否可能?
这是一个移动网站,但页面总是离线,所以我不真的想用jquery。
使用标签
和复选框
输入:
保持所选项目打开和可以切换。 / p>
.collapse {cursor:pointer;显示:block; background:#cdf;}。collapse + input {display:none; / *隐藏复选框* /}。collapse + input + div {display:none;}。collapse + input:checked + div {display:block;}
< label class =collapsefor =_ 1> Collapse 1< / label>< input id =_ 1 type =checkbox> < div> Content 1< / div>< label class =collapsefor =_ 2> Collapse 2< / label>< input id =_ 2type =checkbox>< Content 2< / div>
标签并命名为 radio
输入:
与复选框类似,打开一个。
在两个输入上使用 name =c1type =radio
。
.collapse {cursor:pointer;显示:block; background:#cdf;}。collapse + input {display:none; / *隐藏复选框* /}。collapse + input + div {display:none;}。collapse + input:checked + div {display:block;}
< label class =collapsefor =_ 1> Collapse 1< / label>< input id =_ 1 type =radioname =c1> < div>内容1< / div>< / div>< label class =collapsefor =_ 2> Collapse 2< / label>< input id =_ 2type =radioname =c1> ;< div>内容2< / div>
code> tabindex 和:focus
c> radio 输入,此外还可以使用键触发状态。
单击手风琴外部将关闭所有打开的项目。 p>
.collapse>一个{background:#cdf; cursor:pointer; display:block;}。collapse:focus {outline:none;}。collapse> div {display:none;} collapse:focus div {display:block; }
< div class =collapsetabindex = 1> < a> Collapse 1< / a> < div> Content 1 ....< / div>< / div>< div class =collapsetabindex =1> < a> Collapse 2< / a> < div> Content 2 ....< / div>< / div>
使用:target
code>输入,您还可以使用和键操作
< div class =collapse> < a href =#targ_1>折叠1< / a> < div id =targ_1>内容1 ...< / div>< / div>< div class =collapse> < a href =#targ_2>折叠2< / a> < div id =targ_2>内容2 ...< / div>< / div>
p>
I want something very similar to Theming collapsible headers located here:
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html
Without using JQuery, is this possible?
It's for a mobile site but the page is always going to be offline so I dont really want to use jquery. Also giving custom styling to jquery mobile is alot harder than using pure css and styling it yourself.
Using label
and checkbox
inputs:
Keeps the selected item opened and togglable.
.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>
Using label
and named radio
inputs:
Similar to checkboxes, it just closes the already opened one.
Use name="c1" type="radio"
on both inputs.
.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>
Using tabindex
and :focus
Similar to radio
inputs, additionally you can trigger the states using the key.
Clicking outside of the accordion will close all opened items.
.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>
Using :target
Similar to using radio
inputs, you can additionally use and keys to operate
.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>
这篇关于在没有jQuery的HTML和CSS中显示隐藏div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!