Question

    <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中工作？此外，有没有办法让它保持隐藏状态，直到再次点击，所以你不必持有它？

Answer 1

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

Answer 2

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

如果您打算研究这个，谷歌Stu Nicholls或Suckerfish只为某些css隐藏/显示行为。向他们学习，然后根据您的需要进行调整。但正如@Gaby所说，只有在用户采取行动时（例如：hover或：active），CSS才能改善对象的状态。

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

CSS技巧代替javascript ...几乎正常工作

2 个答案: