隐藏仅使用 CSS 显示内容列表，不使用 javascript

Posted 2023-02-21

技术标签:

【中文标题】隐藏仅使用 CSS 显示内容列表，不使用 javascript【英文标题】：Hide Show content-list with only CSS, no javascript used 【发布时间】：2013-07-17 21:00:39 【问题描述】：

我一直在寻找一个好技巧来制作隐藏/显示内容或仅使用 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/ 它正在工作，但不是应该的。这是问题所在：显示内容时，您可以通过单击“页面上的任意位置”将其隐藏。如何禁用它？如何通过单击隐藏“仅”隐藏内容？提前谢谢！

【问题讨论】：

行为应该只存在于 JavaScript 领域。这就是我在这里的原因！假设它也在 CSS3 中！不需要javascript！让我们期待吧！ ;) 【参考方案1】：

有一个纯 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

【讨论】：

【参考方案2】：

如今（2020 年），您可以使用纯 HTML5 完成此操作，而无需 JavaScript 或 CSS3。

<details>
<summary>Put your summary here</summary>
<p>Put your content here!</p>
</details>

【讨论】：

你能扩展一下吗？这与工作示例相差无几。也许对文档有更多帮助？ developer.mozilla.org/en-US/docs/Web/HTML/Element/details【参考方案3】：

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

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

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

还要注意<input> <label> <div class="collapsible"> 序列很重要，相应的 CSS 使用 + 选择器而不是 ~。

jsfiddle here

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

【讨论】：

【参考方案4】：

这会让你大吃一惊：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>

【讨论】：

你确定它有效吗？虽然不适合我（我使用的是 Firefox）在 FF/Chrome/IE 上为我工作。尝试复制/粘贴到一个新的，这可能会奏效。是的，成功了！显示了一个复选框，所以我替换了第一行！谢谢朋友！ :) 如果没有人提出非复选框解决方案，那么这就是你的全部;) 酷酷。这看起来确实有点作弊，但它完成了工作。如果用户单击单选按钮以外的内容，此解决方案不会丢失显示设置。它可以用于页面导航。【参考方案5】：

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

Try it in 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;

【讨论】：

如果您只有一行，那就太好了。我想让这个概念适用于多行，您单击的每一行都会腾出空间来显示隐藏的内容。例如：codepen.io/Chris_Nielsen/pen/qoGgqB @Diepen 的解决方案jsfiddle.net/a14bztje 值得一看，用于显示/隐藏的多个内容。【参考方案6】：

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

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

HTML：

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

CSS：

#show,#contentdisplay:none;
#show:checked~#contentdisplay:block;

运行代码sn-p：

#show,#contentdisplay:none;
#show:checked~#contentdisplay: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/

【讨论】：

我真的喜欢这样：优雅简单且功能齐全！它甚至不会像复选框 hack 那样跳到屏幕顶部。【参考方案7】：

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

初始情况是当<span> 和:after content : "Show Me"; 聚焦时出现的隐藏消息。当这个<span> 被聚焦时，它的:after content 变为空，而第二个<span>（最初是空的）的:after content 变为“隐藏我”。因此，当您单击第二个<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;

【讨论】：

处理这个想法并阅读@Frederic Kizar 的答案，他说有几个事情变得一团糟，我已经制作了另一个 JSFiddle [链接] (jsfiddle.net/a14bztje)，其中我在 CSS 加号中第一次出现在另一个 ( + ) 之后的元素，以实现结果。注意和

标记保持相同的共享类。我使用 attr(data-something) 作为伪内容来个性化隐藏/显示链接。

一小时后 :-) 我修改了 [link] (jsfiddle.net/a14bztje) JSFiddle 以简化它。我删除了类...只是使用标签样式。它仍然有效！而不是一个新属性（用于显示/隐藏文本），我使用“标题”属性来“嵌入”文本......所以我们赢得了显示工具提示的鼠标悬停优势......其他样式，如边距，位置，背景颜色等是为了视觉目的......“技巧”存在于对象的序列中： + +

好的，为了更清楚，我做了两个 JSFidle 演示。一个只有“CSS的技巧”（与link上方的前一个链接相同）。请注意，我忘记了类，只使用三个< span> 元素的序列，至少由另一个标签分隔。另请注意，我使用Title="something" 属性“嵌入”开关文本（显示/隐藏我），因此我们获得了on hover 效果;-)。您可以使用像 data-text="Something" 这样的个性化属性，而不是 title 属性...（待续...）在第二个 JSFiddle 示例 link 中，我在 CSS 中进行了一些美学调整，以展示我们可以对所有这些进行的实际用法。请注意，我使用visibility 而不是display，然后添加position:absolute，以允许消息中包含多行文本，而不会破坏“切换链接”的所有对齐方式。 ...（待续...）有趣的是，您可以添加任意数量的三个<span> 元素的序列，而无需担心类、名称或ID，只需关注元素的内容即可。所有这一切都无需 Javascript 或 checkboxes、<ul>、<li> 或 <label for > 即可实现。 ;-)【参考方案8】：

首先，感谢威廉。

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

一个例子：

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>

【讨论】：

【参考方案9】：

这是我最近用的。

CSS

div#tabs pdisplay: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/

希望它在某处有所帮助。

【讨论】：

【参考方案10】：

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>

【讨论】：

【参考方案11】：

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

【讨论】：

【参考方案12】：

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

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/

【讨论】：

【参考方案13】：

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

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

CSS

body 
  display: block;

.span3:focus ~ .alert 
  display: none;

.span2:focus ~ .alert 
  display: block;

.alertdisplay:none;

HTML

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

这样文本只有在点击隐藏元素时才会隐藏

【讨论】：

好提示。但是，如果先隐藏文本，那就太好了。按此顺序：先显示，然后隐藏。我刚刚添加了这个 .alertdisplay:none; 并且效果很好。但是当我添加其他一些时，它变得一团糟：jsfiddle.net/6W7XD/12 thx 不管怎样只要焦点移动到任何一个 SPAN 以外的任何位置，显示设置就会变回。所以如果用户需要点击内容，内容就会发生变化。在 Chrome 48.0.2564.22 dev-m 中，单击“隐藏我”后，一旦失去焦点（即：单击其他任何地方），内容就会再次出现隐。依赖焦点不是一个好主意，因为它对不同的操作系统、虚拟机等很挑剔。对于任何无法立即使用它的人 - 确保您的可聚焦元素具有 tabindex 属性集。

以上是关于隐藏仅使用 CSS 显示内容列表，不使用 javascript的主要内容，如果未能解决你的问题，请参考以下文章

仅使用 css 根据浏览器大小显示/隐藏 div？

仅使用 CSS 淡出后隐藏元素

寻求一种优雅的、纯 CSS 的方法来隐藏/显示自动高度内容（带过渡）

仅使用 CSS 的内容有 1 个字符时如何隐藏 div？ [复制]

如何仅使用 CSS 使 HTML 列表水平显示而不是垂直显示？

Onclick 显示/隐藏仅 div 且不带 href 的 css。没有jQuery