在没有 jQuery 的 HTML 和 CSS 中单击时显示隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19170781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show hide divs on click in HTML and CSS without jQuery
提问by dev6546
I want something very similar to Theming collapsible headers located here:
我想要一些与位于此处的 Theming 可折叠标题非常相似的东西：
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html
Without using JQuery, is this possible?
不使用 JQuery，这可能吗？
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.
它适用于移动网站，但页面始终处于脱机状态，因此我真的不想使用 jquery。此外，为 jquery mobile 提供自定义样式比使用纯 css 并自己设置样式要困难得多。
回答by Roko C. Buljan
Using labeland checkboxinput
使用label和checkbox输入
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 labeland named radioinput
使用label和命名radio输入
Similar to checkboxes, it just closes the already opened one.
Use name="c1" type="radio"on both inputs.
与复选框类似，它只是关闭已经打开的复选框。在两个输入上
使用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>Using tabindexand :focus
使用tabindex和:focus
Similar to radioinputs, additionally you can trigger the states using the Tabkey.
Clicking outside of the accordion will close all opened items.
与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>Using :target
使用 :target
Similar to using radioinput, you can additionally use Taband ⏎keys to operate
与使用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>Using <detail>and <summary>tags (pure HTML)
使用<detail>和<summary>标签（纯 HTML）
You can use HTML5's detail and summary tags to solve this problem without any CSS styling or Javascript. Please note that these tags are not supported by Internet Explorer.
您可以使用 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>回答by Vucko
You can use a checkboxto simulateonClickwith CSS:
您可以使用 acheckbox来模拟带有CSS 的onClick：
input[type=checkbox]:checked + p {
display: none;
}
回答by John Chew
I like Roko's answer, and added a few lines to it so that you get a triangle that points right when the element is hidden, and down when it is displayed:
我喜欢 Roko 的回答，并在其中添加了几行，这样您就会得到一个三角形，该三角形在元素隐藏时指向右侧，在元素显示时指向下方：
.collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " b6"; display: inline-block; }
.collapse + input:checked:after { content: " bc"; display: inline-block; }
.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none; }
.collapse + input + * { display: none; }
.collapse + input:checked + * { display: block; }
回答by Ben
Of course! jQuery is just a library that utilizes javascript after all.
当然！jQuery 毕竟只是一个使用 javascript 的库。
You can use document.getElementById to get the element in question, then change its height accordingly, through element.style.height.
您可以使用 document.getElementById 获取相关元素，然后通过 element.style.height 相应地更改其高度。
elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';
Wrap that up in a neat little function that caters for toggling back and forth and you have yourself a solution.
把它封装在一个简洁的小函数中，它可以来回切换，你就有了自己的解决方案。
