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

• Z时代
• 2024-01-10
• 分类：问答

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

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

回答：

回答：

使所选项目保持打开状态并切换。

.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>

回答：

与复选框类似，它仅关闭已打开的复选框。在两个输入上

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

回答：

与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>

回答：

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

回答：

您可以使用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>

以上是 在不使用jQuery的HTML和CSS中单击时显示隐藏div 的全部内容， 来源链接： utcz.com/qa/401004.html