CSS技巧代替javascript......几乎可以工作答案

【问题标题】：CSS trick in place of javascript... almost workingCSS技巧代替javascript......几乎可以工作
【发布时间】：2011-06-04 10:12:14
【问题描述】：

    <html>
    <style type="text/css">
    h3{
        display: block !important;
    }
    h3:active{
        display: block !important;
    }
    h3 span:before{
        content: "[-]";
    }
    h3:active span:before{
        content: "[+]";
    }
    div#summary:active >  h3, h3:active ~ h4, h3:active ~ ul{
        display: none;
    }
    </style>
    <body>
    <div id="summary">
    <h3>Click to hide<span></span></h3>
    <ul><li>first</li></ul>
    <h4>title 1</h4>
    <ul><li>second</li></ul>
    <h4>title 2</h4>
    <ul><li>third</li></ul>
    <h4>title 3</h4>
    <ul><li>fourth</li></ul>
    </div>
    </body>
    </html>

现场演示： http://jsfiddle.net/BxrJz/

它在 chrome 和 firefox 中工作，但我如何让它在 ie 中工作？还有，有没有办法让它一直处于隐藏状态，直到再次点击，就不用一直按住了？

【问题讨论】：

应该发生什么？
我知道您可以通过单击并拖动鼠标离开链接然后释放来保持链接处于活动状态。也许如果您更改活动元素的位置或将其隐藏起来，您可以获得相同的效果......（顺便说一句，到目前为止您所拥有的东西非常酷）
@JMC Creative - 它应该隐藏 h4 和 ul 元素
IE 对 CSS 选择器的支持非常差，尤其是在 IE6 中，基本上不存在支持。 7的稍微好一点，8的更好。 9 可能会有相当完整的支持。
实际上，如果您扩展 :hover 元素的大小以覆盖整个窗口（但 AFAIK 不在外部 - 例如在 chrome 中），您可以保持该状态

标签： css internet-explorer css-selectors

【解决方案1】：

这是一些非常酷的 css 编码，但就实用性而言，我会重新考虑您使用的整个方法。奇怪的是，人们只会点击标题，而不是 [-]“按钮”。它只是在<h3>处于活动状态时隐藏文本，然后文本重新出现，这不直观，更不用说实用了。

如果您打算对此进行研究，请在 Google Stu Nicholls 或 Suckerfish 上搜索某些 CSS 仅隐藏/显示行为。向他们学习，然后根据您的需要调整这些内容。但正如@Gaby 所说，CSS 不能永久更改对象的状态，只有在用户执行操作时（例如：hover 或 :active）。

作为一个附带问题，我会将cursor:pointer 添加到<h3> 和<span> 标签中，这样更清楚它是一个可点击的元素。

【讨论】：

" 另外，有没有办法让它一直处于隐藏状态，直到再次点击它，这样你就不用按住它了？"他在问题中说...

【解决方案2】：

没有 javascript...CSS 响应事件。它不能永久改变 DOM 状态。

【讨论】：

但是单击可以将链接的 dom 状态永久更改为“已访问”。您曾经可以通过利用它来做一些非常巧妙的事情，例如 matthewjamestaylor.com/blog/experimenting-with-visited-links 我认为由于与“历史披露黑客”相关的安全问题，浏览器现在已禁用此功能