纯 CSS 显示/隐藏 div 方式？答案

【问题标题】：PURE CSS show/hide div way?纯 CSS 显示/隐藏 div 方式？
【发布时间】：2013-01-15 14:59:52
【问题描述】：

真的不存在任何纯 css 方法，我可以在我的网站上单击一些所需的 :active div id，并且可能会在它之外显示另一个 div 或其他什么？到目前为止，我发现的一切要么是用 CSS 完成的糟糕方式，要么是用 JQuery 或 Javascript 完成的方式？任何人，任何人我需要的纯 CSS。谢谢！

【问题讨论】：

您能分享您看到和尝试过的方法，并告诉我们您具体不喜欢它们的什么地方吗？
CSS 只能影响子元素或兄弟元素，不能影响页面中的其他元素。
我已经通过链接到 :hover 完成了下拉菜单，但正如 Diodeus 所提到的，您只能影响孩子或兄弟姐妹。（如果你离开边界框，它会立即消失，有些手颤抖的人不喜欢）当然，它不是触摸友好的。
不，“纯 CSS”方式不存在，因为例如点击是浏览器 JavaScript 解释器上下文中的事件。但是，您可以，而且我认为这就是您正在寻找的，使用 JavaScript 实现这样的 DOM 操作，而不是使用一些简短的 INLINE 语句（如 onclick="..js here.."）。
嗯，我一直在阅读的各种网站，它们只能通过使用 :hover :focus :active 等来实现显示/隐藏 div 效果。没有一个真正让它按我想要的方式运行。我也没有尝试过所有这些，但我最终测试了他们在所有代码下提供的演示。不幸的是，出于某种奇怪的原因，我觉得 Javascript 是一种肮脏的语言。我也真的不喜欢在我的 CSS 和 HTML 代码中实现它，因为我已经使用 Rails 了。我只希望 Rails 可以为我做到这一点。

标签： javascript css html show-hide

【解决方案1】：

在 CSS div 中没有 onclick 处理程序。您需要将 div 放入

''

标签.. 所以你可以像链接一样处理它..你将拥有鼠标悬停的功能和类似的东西.. 看看这个thread

【讨论】：

这是一个获取鼠标事件的巧妙技巧，但您仍然必须使用 javascript 来定义实际显示新 div 的鼠标处理程序代码

【解决方案2】：

你可以试试:target

或使用子A B、下一个A+B 或兄弟A~B 选择器。

但是纯 css 方法不能像简单的 js 那样广泛地保存和操作块的状态，它只是添加/删除类。

【讨论】：

【解决方案3】：

当为特定的 html 元素指定 CSS 时，您无法影响接收鼠标事件的元素的样式。要在单击特定元素时显示另一个元素，您需要更改另一个不是鼠标事件目标的 html 元素的样式，因此需要 javascript 或像 vb 这样的专有 Web 脚本语言来执行您想要的操作做。

我要说的最后一件事是 CSS 旨在为单个元素或元素组添加样式效果。它不打算在网站上实现繁重的程序化功能。这就是发明 javascript 的目的。

【讨论】：

那么在这种情况下，您可以向我推荐什么是最简单、学习最快、最容易使用、最容易理解的网络脚本语言。请给出多个建议，因为我不想有最后通牒。
唯一适用于所有浏览器的标准 Web 脚本是 javascript。 Visual basic 等专有脚本语言只能在 Internet Explorer 中运行，或作为其他浏览器的第 3 方扩展。使用正确的扩展程序，您可以在浏览器中使用 perl、python 或 w/e 语言，但用户必须为他们的浏览器安装该插件才能使页面正常工作
万维网联盟（决定什么成为 Web 标准的组织）提供了有关使用 javascript 的精彩教程，这些教程可能会很快教会您需要什么。您可以在以下位置找到他们的教程：w3schools.com/js/default.asp

【解决方案4】：

你可以试试，:active伪类。但即便如此，你也需要把你想在里面展示的任何东西都包起来。无论如何，我的尝试是：

<a>
  Click and Hold Me!
  <div class="expand">
    I am the expander!
  </div>
</a>

CSS

a {text-decoration: none;}
a .expand {height: 0; overflow: hidden; transition: height 5s;}
a:active .expand {height: 1em; overflow: visible; transition: height 5s;}

小提琴：http://codepen.io/praveenscience/pen/KArEB

【讨论】：

【解决方案5】：

这是一个 Pure CSS 方法来显示-隐藏。将“标题”内容放在容器元素中。将“信息”内容放在“标题”下但在同一个容器内。现在，样式行为以响应点击活动。

.dropdowntitle, article > * { cursor: pointer; }
.dropdowntitle:focus + .dropdowninfo { display:block; }
.dropdowninfo { background-color:inherit; display:none; height:inherit; }

<article>
<h3 class="dropdowntitle" tabindex="1">Title</h3>
<p class="dropdowninfo">Info</p>
<h3 class="dropdowntitle" tabindex="2">Title</h3>
<p class="dropdowninfo">Info</p>
<h3 class="dropdowntitle" tabindex="3">Title</h3>
<p class="dropdowninfo">Info</p>
</article>

优点一次只让用户关注一个信息下拉菜单。较长的“列表”中的简单下拉双击关闭打开导航。不干扰浏览历史记录。

缺点就基本的 HTML/CSS 而言（工具提示数据标题属性替换标题属性：单击/点击 HTML 数据层以覆盖下拉标题）？ JQuery，然后是程序学，肯定会占据优势。

http://tympanus.net/codrops/2012/12/17/css-click-events) 复选框和目标黑客我尝试过，但没有改进。

Show / hide div on click with CSS 类似的线程。

HTML/CSS show/hide multiple elements?主要是脚本解决方案

https://support.office.com/en-us/article/Create-or-edit-a-hyperlink-5d8c0804-f998-4143-86b1-1199735e07bf 同时独立地显示-隐藏多个下拉菜单，程序化。

【讨论】：

【解决方案6】：

CSS 无法处理 onClick 事件。您可以使用 Javascript .onclick() 函数。但是 CSS 有 Pseudo-classe 可能会有所帮助：

a:link {color:#FF0000;}    /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;}   /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;}  /* selected link - the user has clicked the link and the browser is loading the new page */

在https://www.w3schools.com/css/css_pseudo_classes.asp中查看更多信息

【讨论】：