在没有jQuery的情况下单击HTML和CSS显示隐藏div

Question

我想要一些与Theming可折叠标题非常类似的东西:

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html

不使用JQuery,这可能吗？

这是一个移动网站,但页面总是脱机,所以我真的不想使用jquery.同时为jquery mobile提供自定义样式比使用纯css并自己设置风格要难得多.

Answer 1

使用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>

使用label和命名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键触发状态.
单击手风琴外部将关闭所有打开的项目.

.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>标签(纯HTML)

您可以使用HTML5的详细信息和摘要标记来解决此问题,而无需任何CSS样式或Javascript.请注意,Internet Explorer(或Microsoft Edge)不支持这些标记.

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

Answer 2

您可以使用a checkbox来模拟 使用CSS的onClick:

input[type=checkbox]:checked + p {
    display: none;
}

的jsfiddle

相邻的兄弟选择器