仅使用 CSS 隐藏显示内容列表，不使用 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17731457/
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
Hide Show content-list with only CSS, no javascript used
提问by Frederic Kizar
I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I've managed to make this action:
我一直在寻找一个很好的技巧来制作隐藏/显示内容或只有 CSS 而没有 javascript 的列表。我设法做出了这个动作：
<!DOCTYPE html>
<head>
<style>
#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}
</style>
</head>
<body>
<div>
<a href="#show"class="show">[Show]</a>
<a href="#hide"class="hide">/ [Hide]</a>
<div id="cont">Content</div>
</div>
</body>
</html>
Demo here: http://jsfiddle.net/6W7XD/And it's working but not as it should. Here is the problem: When the content is shown, you can hide it by clicking "anywhere on the page". How to disable that? how to hide content "only" by clicking hide? Thank you in advance!
演示在这里：http: //jsfiddle.net/6W7XD/它正在工作，但不是它应该的。问题是：当内容显示时，您可以通过单击“页面上的任何位置”来隐藏它。如何禁用它？如何通过单击隐藏“仅”隐藏内容？先感谢您！
采纳答案by Kevin Lynch
I wouldn't use checkboxes, i'd use the code you already have
我不会使用复选框，我会使用您已有的代码
DEMO http://jsfiddle.net/6W7XD/1/
演示http://jsfiddle.net/6W7XD/1/
CSS
CSS
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert{display:none;}
HTML
HTML
<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>
This way the text is only hidden on click of the hide element
这样，文本仅在单击隐藏元素时隐藏
回答by Pat Lillis
This is going to blow your mind: Hidden radio buttons.
这会让你大吃一惊：隐藏的单选按钮。
input#show, input#hide {
display:none;
}
span#content {
display:none;
}
input#show:checked ~ span#content {
display:block;
}
input#hide:checked ~ span#content {
display:none;
}<label for="show">
<span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
<span>[Hide]</span>
</label>
<input type=radio id="hide" name="group">
<span id="content">Content</span>回答by MonkeyTime
There is 3 rapid examples with pure CSS and without javascript where the content appears "on click", with a "maintained click" and a third "onhover" (all only tested in Chrome). Sorry for the up of this post but this question are the first seo result and maybe my contribution can help beginner like me
有 3 个使用纯 CSS 且没有 javascript 的快速示例，其中内容显示为“点击时”，“保持点击”和第三个“悬停”（均仅在 Chrome 中测试）。很抱歉这篇文章的出现，但这个问题是第一个 seo 结果，也许我的贡献可以帮助像我这样的初学者
I think (not tested) but the advantage of argument "content" that you can add great icon like from Font Awesome(its \f-Code) or an hexadecimal icon in place of the text "Hide" and "Show" to internationalize the trick.
我认为（未测试）但参数“内容”的优势在于，您可以添加来自Font Awesome（其 \f-Code）的精美图标或十六进制图标代替文本“隐藏”和“显示”以国际化诡计。
example link http://jsfiddle.net/MonkeyTime/h3E9p/2/
示例链接http://jsfiddle.net/MonkeyTime/h3E9p/2/
<style>
label { position: absolute; top:0; left:0}
input#show, input#hide {
display:none;
}
span#content {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
input#show:checked ~ .show:before {
content: ""
}
input#show:checked ~ .hide:before {
content: "Hide"
}
input#hide:checked ~ .hide:before {
content: ""
}
input#hide:checked ~ .show:before {
content: "Show"
}
input#show:checked ~ span#content {
opacity: 1;
font-size: 100%;
height: auto;
}
input#hide:checked ~ span#content {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
</style>
<input type="radio" id="show" name="group">
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<span id="content">Lorem iupsum dolor si amet</span>
<style>
#show1 { position: absolute; top:20px; left:0}
#content1 {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show1:before {
content: "Show"
}
#show1:active.show1:before {
content: "Hide"
}
#show1:active ~ span#content1 {
opacity: 1;
font-size: 100%;
height: auto;
}
</style>
<div id="show1" class="show1"></div>
<span id="content1">Ipsum Lorem</span>
<style>
#show2 { position: absolute; top:40px; left:0}
#content2 {
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show2:before {
content: "Show"
}
#show2:hover.show2:before {
content: "Hide"
}
#show2:hover ~ span#content2 {
opacity: 1;
font-size: 100%;
height: auto;
}
/* extra */
#content, #content1, #content2 {
float: left;
margin: 100px auto;
}
</style>
<div id="show2" class="show2"></div>
<span id="content2">Lorem Ipsum</span>
回答by lynx_74
I used a hidden checkbox to persistent view of some message. The checkbox could be hidden (display:none) or not. This is a tiny code that I could write.
我使用隐藏的复选框来持久查看某些消息。该复选框可以隐藏（显示：无）或不隐藏。这是我可以编写的一小段代码。
You can see and test the demo on JSFiddle
您可以在JSFiddle上查看和测试演示
HTML:
HTML：
<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>
CSS:
CSS：
#show,#content{display:none;}
#show:checked~#content{display:block;}
Run code snippet:
运行代码片段：
#show,#content{display:none;}
#show:checked~#content{display:block;}<input id="show" type=checkbox>
<label for="show">Click for Help</label>
<span id="content">Do you need some help?</span>回答by William
This is what I've used recently.
这是我最近使用的。
CSS
CSS
div#tabs p{display:none;}
div#tabs p.tab1:target {display:block;}
div#tabs p.tab2:target {display:block;}
div#tabs p.tab3:target {display:block;}
HTML
HTML
<div id='tabs'>
<h2 class="nav-tab-wrapper">
<a href="#tab1" class="nav-tab tab1">Pages</a>
<a href="#tab2" class="nav-tab nav-tab-active tab2">Email</a>
<a href="#tab3" class="nav-tab tab3">Support</a>
</h2>
<p id='tab1' class='tab1'>Awesome tab1 stuff</p>
<p id='tab2' class='tab2'>Tab2 stuff</p>
<p id='tab3' class='tab3'>Tab3 stuff</p>
</div>
https://jsfiddle.net/hoq0djwc/1/
https://jsfiddle.net/hoq0djwc/1/
Hope it helps somewhere.
希望它在某处有所帮助。
回答by lsblsb
First, thanks to William.
首先，感谢威廉。
Second - i needed a dynamic version. And it works!
第二 - 我需要一个动态版本。它有效！
An example:
一个例子：
CSS:
CSS：
p[id^="detailView-"]
{
display: none;
}
p[id^="detailView-"]:target
{
display: block;
}
HTML:
HTML：
<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>
<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>
回答by Diepen
I know it's an old post but what about this solution (I've made a JSFiddle to illustrate it)... Solution that uses the :afterpseudo elements of <span>to show/hide the <span>switch link itself (in addition to the .alertmessage it must show/hide). When the pseudo element loses it's focus, the message is hidden.
我知道这是一篇旧帖子，但是这个解决方案怎么样（我已经制作了一个 JSFiddle 来说明它）...使用 的:after伪元素<span>来显示/隐藏<span>开关链接本身的解决方案（除了.alert它必须显示的消息/隐藏）。当伪元素失去焦点时，消息被隐藏。
The initial situation is a hidden message that appears when the <span>with the :after content : "Show Me";is focused. When this <span>is focused, it's :after contentbecomes empty while the :after contentof the second <span>(that was initially empty) turns to "Hide Me". So, when you click this second <span>the first one loses it's focus and the situation comes back to it's initial state.
初始情况是当焦点<span>与时出现的隐藏消息:after content : "Show Me";。当这个<span>被聚焦时，它:after content变成空的:after content，而第二个<span>（最初是空的）变成"Hide Me"。因此，当您单击第二个时<span>，第一个失去焦点，情况又回到初始状态。
I started on the solution offered by @Vector I kept the DOM'situation presented ky @Frederic Kizar
我开始使用@Vector 提供的解决方案，我将 DOM 的情况保留在 @Frederic Kizar 上
HTML:
HTML：
<span class="span3" tabindex="0"></span>
<span class="span2" tabindex="0"></span>
<p class="alert" >Some message to show here</p>
CSS:
CSS：
body {
display: inline-block;
}
.span3 ~ .span2:after{
content:"";
}
.span3:focus ~ .alert {
display:block;
}
.span3:focus ~ .span2:after {
content:"Hide Me";
}
.span3:after {
content: "Show Me";
}
.span3:focus:after {
content: "";
}
.alert {
display:none;
}
回答by Miguel Garrido
I've got another simple solution:
我有另一个简单的解决方案：
HTML:
HTML：
<a href="#alert" class="span3" tabindex="0">Hide Me</a>
<a href="#" class="span2" tabindex="0">Show Me</a>
<p id="alert" class="alert" >Some alarming information here</p>
CSS:
CSS：
body { display: block; }
p.alert:target { display: none; }
Source: http://css-tricks.com/off-canvas-menu-with-css-target/
回答by jeffmcneill
The answer below includes changing text for "show/hide", and uses a single checkbox, two labels, a total of four lines of html and five lines of css. It also starts out with the content hidden.
下面的答案包括更改“显示/隐藏”的文本，并使用单个复选框、两个标签、总共四行 html 和五行 css。它还从隐藏的内容开始。
HTML
HTML
<input id="display-toggle" type=checkbox>
<label id="display-button" for="display-toggle"><span>Display Content</span></label>
<label id="hide-button" for="display-toggle"><span>Hide Content</span></label>
<div id="hidden-content"><br />Hidden Content</div>
CSS
CSS
label {
background-color: #ccc;
color: brown;
padding: 15px;
text-decoration: none;
font-size: 16px;
border: 2px solid brown;
border-radius: 5px;
display: block;
width: 200px;
text-align: center;
}
input,
label#hide-button,
#hidden-content {
display: none;
}
input#display-toggle:checked ~ label#display-button {
display: none;
}
input#display-toggle:checked ~ label#hide-button {
display: block;
background-color: #aaa;
color: #333
}
input#display-toggle:checked ~ #hidden-content {
display: block;
}
回答by P. D. Bowman
Just wanted to illustrate, in the context of nested lists, the usefulness of the hidden checkbox <input>approach @jeffmcneill recommends — a context where each shown/hidden element should hold its state independently of focus and the show/hide state of other elements on the page.
只是想说明，在嵌套列表的上下文中，<input>@jeffmcneill 推荐的隐藏复选框方法的用处 - 每个显示/隐藏元素都应保持其状态独立于页面上的焦点和显示/隐藏状态的上下文.
Giving values with a common set of beginning characters to the idattributes of all the checkboxes used for the shown/hidden elements on the page lets you use an economical [id^=""]selector scheme for the stylesheet rules that toggle your clickable element's appearance and the related shown/hidden element's displaystate back and forth. Here, my ids are ‘expanded-1,' ‘expanded-2,' ‘expanded-3.'
id为页面上显示/隐藏元素所用的所有复选框的属性赋予具有一组通用开头字符的值，您可以使用经济的[id^=""]选择器方案来切换可点击元素的外观和相关的显示/隐藏元素的样式表规则。display状态来回。在这里，我的ids 是“expanded-1”、“expanded-2”、“expanded-3”。
Note that I've also used @Diepen's :afterselector idea in order to keep the <label>element free of content in the html.
请注意，我还使用了@Diepen 的:after选择器思想，以保持<label>元素在 html 中没有内容。
Note also that the <input><label><div class="collapsible">sequence matters, and the corresponding CSS with +selector instead of ~.
还要注意<input><label><div class="collapsible">顺序很重要，相应的 CSS 使用+选择器而不是~.
.collapse-below {
display: inline;
}
p.collapse-below::after {
content: '<ul>
<li>single item a</li>
<li>single item b</li>
<li>
<p class="collapse-below" title="this expands">multiple item a</p>
<input type="checkbox" id="expanded-1" class="collapse-below" name="toggle">
<label for="expanded-1" title="click to expand"></label>
<ul class="collapsible">
<li>sub item a.1</li>
<li>sub item a.2</li>
</ul>
</li>
<li>single item c</li>
<li>
<p class="collapse-below" title="this expands">multiple item b</p>
<input type="checkbox" id="expanded-2" class="collapse-below" name="toggle">
<label for="expanded-2" title="click to expand"></label>
<ul class="collapsible">
<li>sub item b.1</li>
<li>sub item b.2</li>
</ul>
</li>
<li>single item d</li>
<li>single item e</li>
<li>
<p class="collapse-below" title="this expands">multiple item c</p>
<input type="checkbox" id="expanded-3" class="collapse-below" name="toggle">
<label for="expanded-3" title="click to expand"></label>
<ul class="collapsible">
<li>sub item c.1</li>
<li>sub item c.2</li>
</ul>
</li>
</ul>
0A0##代码##0A0';
}
p.collapse-below ~ label {
display: inline;
}
p.collapse-below ~ label:hover {
color: #ccc;
}
input.collapse-below,
ul.collapsible {
display: none;
}
input[id^="expanded"]:checked + label::after {
content: '5BE';
}
input[id^="expanded"]:not(:checked) + label::after {
content: '5B8';
}
input[id^="expanded"]:checked + label + ul.collapsible {
display: block;
}
input[id^="expanded"]:not(:checked) + label + ul.collapsible {
display: none;
}