在没有jQuery的HTML和CSS中显示隐藏div [英] Show hide divs on click in HTML and CSS without jQuery
问题描述
我想要一个非常类似于Theming collapsible headers位于这里的东西:
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html
不使用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>< label class =collapsefor =_ 2> Collapse 2< / label>< input id =_ 2type =checkbox><内容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 输入,此外还可以使用 Tab 键触发状态。
单击手风琴外部将关闭所有打开的项目。 p>
.collapse> a {background:#cdf; cursor:pointer; display:block;}。collapse:focus {outline:none;}。 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>内容2 ...< / div>< / div>
使用:target
code>输入,您可以另外使用 Tab 和⏎键来操作
< 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 Tab 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 Tab 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!