1. 首页
  2. 问题
  3. 在不使用jQuery的HTML和CSS中单击时显示隐藏div
小编典典

在不使用jQuery的HTML和CSS中单击时显示隐藏div

javascript

如果不使用JQuery，这可能吗？

它用于移动网站，但是页面始终处于脱机状态，所以我真的不想使用jquery。与自定义CSS样式相比，为jquery mobile提供自定义样式要困难得多。


阅读 411

收藏
2020-05-01

共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的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>
2020-05-01