在不使用jQuery的HTML和CSS中单击时显示隐藏div

Question

我想要与位于此处的主题可折叠标头非常相似的内容：http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html如果不使用JQuery，这可能吗？它用于移动网站，但页面始终将处于脱机状态，所以我真的不想使用jquery。与自定义CSS样式相比，为jquery mobile提供自定义样式要困难得多。

Answer 1

您可以使用checkbox来通过CSS 模拟 onClick：

input[type=checkbox]:checked + p {

    display: none;

}

Answer 2

我喜欢Roko的答案，并在其中添加了几行，以便获得一个三角形，该三角形在元素隐藏时指向右边，而在元素显示时指向下方：

.collapse { font-weight: bold; display: inline-block; }

.collapse + input:after { content: " \25b6"; display: inline-block; }

.collapse + input:checked:after { content: " \25bc"; display: inline-block; }

.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none;  }

.collapse + input + * { display: none; }

.collapse + input:checked + * { display: block; }