如何使用严格的 HTML/CSS 在点击时显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26901466/
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
How to show/hide div on click with stricly HTML/CSS
提问by LaGuille
I'm working on a sidebar for my personal website and I'm looking to show/hide a Facebook follow button when visitors click on a Facebook icon. I am wondering if it is possible with stricly HTML/CSS and if not, what would be the easiest way to do it with JavaScript. I've seen many jQuery solutions around but I have yet to find a purely HTML/CSS one.
我正在为我的个人网站开发侧边栏，当访问者单击 Facebook 图标时，我希望显示/隐藏 Facebook 关注按钮。我想知道是否可以使用严格的 HTML/CSS，如果不能，使用 JavaScript 最简单的方法是什么。我已经看到了很多 jQuery 解决方案，但我还没有找到一个纯粹的 HTML/CSS 解决方案。
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
<div class="sidebar-follow-button">
This is the follow button.
</div>
</div>
Clicking on .sidebar-follow-iconshould reveal .sidebar-follow-buttonand clicking again on .sidebar-follow-iconshow hide .sidebar-follow-button.
单击.sidebar-follow-icon应显示.sidebar-follow-button并再次单击.sidebar-follow-iconshow hide .sidebar-follow-button。
采纳答案by Ghostff
Html
html
<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>
CSS
CSS
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
.facebook {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
display: none;
}
回答by Jon P
Using a check box it is possible, but I prefer to use javascript for interactivity.
使用复选框是可能的，但我更喜欢使用 javascript 进行交互。
#fbCheck {
display:none;
}
#fbCheck:not(:checked) ~ .sidebar-follow-button
{
display:none;
}
#fbCheck:checked ~ .sidebar-follow-button
{
display:block;
}<div class="sidebar-follow">
<input type="checkbox" id="fbCheck" />
<label for="fbCheck">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
</label>
<div class="sidebar-follow-button">This is the follow button.</div>
</div>On a side note, do you really want your users to be doing something with two clicks when it can be done with one?
附带说明一下，您真的希望您的用户在一次可以完成的情况下通过两次点击来完成某件事吗？
回答by Ray Bernard
We had a similar need for a CSS-only solution, and found that this works with these conditions: (1) the checkbox "button" and items to be toggled are all within the same overall container, such as body or div or p, and items to be toggled are not separated by being in a sub-container, and (2) the label and checkbox input must be defined ahead of the items to be toggled.
我们对纯 CSS 解决方案也有类似的需求，并发现这适用于以下条件：（1）复选框“按钮”和要切换的项目都在同一个整体容器中，例如 body 或 div 或 p，和要切换的项目不会被子容器分隔，并且 (2) 标签和复选框输入必须在要切换的项目之前定义。
回答by James Taylor
This is honestly not typically done in HTML/ CSS. It's best suited for Javascript, JQuery, and the like.
老实说，这通常不是在HTML/ 中完成的CSS。它最适用于Javascript、JQuery等。
But it got me thinking... is it possible.
但这让我想到……有可能吗。
And here's what I came up with that I think is the closest that you can get using pure CSS: http://jsfiddle.net/a92pkeqw/
这就是我想出的，我认为是最接近使用纯的CSS：http: //jsfiddle.net/a92pkeqw/
My reasoning: the only element that can save it's 'state' is the checkbox. This is, therefore, the only element that can produce a toggling effect. Using the toggle and the ~selector in CSS, it was possible to edit the styling of another element, in this case change the visibility property.
我的推理：唯一可以保存它的“状态”的元素是复选框。因此，这是唯一可以产生切换效果的元素。使用~CSS 中的切换和选择器，可以编辑另一个元素的样式，在这种情况下更改可见性属性。
HTML:
HTML：
<input type="checkbox" class="toggle"></input>
<div class="toggled">
Text that be hidden dynamically!
</div>
CSS:
CSS：
input[type='checkbox']:checked ~ .toggled
{
visibility: hidden;
}
input[type='checkbox'] ~ .toggled
{
visibility: visible;
}
回答by ianaya89
I think you can't do it without JavaScript.
我认为没有 JavaScript就做不到。
The easy way (but not the best) is add the onclickattribute to the <div>tag.
简单的方法（但不是最好的）是将onclick属性添加到<div>标签中。
This example use pure JS
这个例子使用纯JS
JS
JS
function toggleImage(){
var div = document.getElementsByClassName('sidebar-follow-icon')[0];
if (!div.style.display || div.style.display === 'block') div.style.display = 'none';
else div.style.display = 'block';
}
HTML
HTML
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<h1>a</h1>
</div>
<div class="sidebar-follow-button" onclick="toggleImage();">
This is the follow button.
</div>
</div>
*Is not a good practice attach javascript through the html, instead that you should attach the click event using the addEventListenerfunction.
*通过 html 附加 javascript 不是一个好习惯，相反，您应该使用addEventListener函数附加点击事件。
