在没有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 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 输入，此外还可以使用 Tab 键触发状态。

单击手风琴外部将关闭所有打开的项目。 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>输入，您还可以使用 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屋！