41

我一直在寻找一个好技巧来制作隐藏/显示内容或只有 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>

演示在这里：http: //jsfiddle.net/6W7XD/ 它正在工作，但不是应该的。问题出在：当内容显示时，您可以通过单击“页面上的任意位置”将其隐藏。如何禁用它？如何通过单击隐藏“仅”隐藏内容？先感谢您！

4

13 回答 13

39

我不会使用复选框，我会使用您已经拥有的代码

演示http://jsfiddle.net/6W7XD/1/

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

这样，文本仅在单击隐藏元素时隐藏

于 2013-07-18T19:33:27.267 回答
23

这会让你大吃一惊：隐藏的单选按钮。

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>

于 2013-07-18T19:04:29.630 回答
19

我使用隐藏的复选框来持久查看某些消息。该复选框可以隐藏（显示：无）或不。这是我可以编写的一小段代码。

您可以在JSFiddle上查看和测试演示

HTML：

<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>

CSS：

#show,#content{display:none;}
#show:checked~#content{display:block;}

运行代码片段：

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

http://jsfiddle.net/9s8scbL7/

于 2017-06-01T02:01:32.490 回答
13

有 3 个使用纯 CSS 和没有 javascript 的快速示例，其中内容显示为“单击时”，具有“保持单击”和第三个“悬停”（均仅在 Chrome 中测试）。很抱歉这篇文章的出现，但这个问题是第一个 seo 结果，也许我的贡献可以帮助像我这样的初学者

我认为（未经测试），但参数“内容”的优势在于您可以添加很棒的图标，例如Font Awesome（其 \f 代码）或十六进制图标代替文本“隐藏”和“显示”以国际化诡计。

示例链接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>
于 2014-02-10T19:57:27.407 回答
9

这是我最近使用的。

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

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

希望它在某个地方有所帮助。

于 2015-05-17T04:19:25.763 回答
5

首先，感谢威廉。

第二 - 我需要一个动态版本。它有效！

一个例子：

CSS：

p[id^="detailView-"]
{
    display: none;
}

p[id^="detailView-"]:target
{
    display: block;
}

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>
于 2015-06-30T13:20:25.293 回答
5

如今（2020 年），您可以使用纯 HTML5 做到这一点，并且不需要 JavaScript 或 CSS3。

<details>
<summary>Put your summary here</summary>
<p>Put your content here!</p>
</details>
于 2020-04-01T11:37:54.523 回答
3

下面的答案包括更改“显示/隐藏”的文本，并使用一个复选框、两个标签、总共四行 html 和五行 css。它还从隐藏的内容开始。

在 JSFiddle 中尝试

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

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;
}
于 2017-08-24T14:08:00.277 回答
1

我有另一个简单的解决方案：

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：

body { display: block; }
p.alert:target { display: none; }

来源：http ://css-tricks.com/off-canvas-menu-with-css-target/

于 2013-08-12T04:04:23.133 回答
1

我知道这是一篇旧帖子，但是这个解决方案怎么样（我制作了一个 JSFiddle 来说明它）......使用:after伪元素<span>来显示/隐藏<span>开关链接本身的解决方案（除了.alert它必须显示的消息/隐藏）。当伪元素失去焦点时，消息被隐藏。

初始情况是一个隐藏的消息，当<span>with:after content : "Show Me";被聚焦时出现。当它<span>被聚焦时，它:after content变成空的，而:after content第二个<span>（最初是空的）变成"Hide Me"。因此，当您单击第二个时<span>，第一个失去焦点，情况又回到初始状态。

我从@Vector 提供的解决方案开始我保持了 DOM 的情况呈现 ky @Frederic Kizar

HTML：

<span class="span3" tabindex="0"></span>
<span class="span2" tabindex="0"></span>
<p class="alert" >Some message to show here</p>

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;
}
于 2017-02-17T23:06:46.593 回答
1

只是想说明，在嵌套列表的上下文中，<input>@jeffmcneill 推荐的隐藏复选框方法的有用性 - 每个显示/隐藏元素应该保持其状态独立于焦点和页面上其他元素的显示/隐藏状态的上下文.

id为页面上用于显示/隐藏元素的所有复选框的属性赋予具有一组通用开始字符的值，让您可以[id^=""]为样式表规则使用经济的选择器方案，以切换可点击元素的外观和相关的显示/隐藏元素的外观display来回状态。在这里，我id的 s 是 'expanded-1'、'expanded-2'、'expanded-3'。</p>

请注意，我还使用了@Diepen 的:after选择器思想，以使<label>元素在 html 中没有内容。

另请注意，<input> <label> <div class="collapsible">顺序很重要，相应的 CSS 使用+selector 而不是~.

jsfiddle在这里

.collapse-below {
    display: inline;
}

p.collapse-below::after {
    content: '\000A0\000A0';
}

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: '\025BE';
}

input[id^="expanded"]:not(:checked) + label::after {
    content: '\025B8';
}

input[id^="expanded"]:checked + label + ul.collapsible {
    display: block;
}

input[id^="expanded"]:not(:checked) + label + ul.collapsible {
    display: none;
}
<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>

于 2019-10-05T15:51:24.153 回答
0

来自cssportal.com的一个非常简单的解决方案

如果按下 [show]，文本 [show] 将被隐藏，反之亦然。

这个例子在 Chrome 中不起作用，我不知道为什么......

.show {
	display: none;
}
.hide:focus + .show {
	display: inline;
}
.hide:focus {
	display: none;
}
.hide:focus ~ #list { display:none; }
@media print {
.hide, .show {
	display: none;
}
}
<div><a class="hide" href="#">[hide]</a> <a class="show" href="#">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>

于 2014-12-22T15:59:37.813 回答
0

有一个纯 HTML 解决方案！尝试<details>元素。

MDN 的实现细节：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

还有一个来自 W3 的试用示例：https ://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details

浏览器支持信息在这里：https ://caniuse.com/details

于 2021-10-28T19:48:00.200 回答