在没有jQuery的HTML和CSS中单击显示隐藏div

我想要的东西非常类似于位于这里的Theming可折叠标题：

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html

不使用JQuery，这可能吗？

这是一个移动网站，但网页总是会脱机，所以我真的不想使用jQuery。 也给jquery移动自定义样式比使用纯CSS和自己造型更难。

Answer 1

使用label和checkboxinput：

保持选定的项目打开和可触发。

 .collapse{ cursor: pointer; display: block; background: #cdf; } .collapse + input{ display: none; /* hide the checkboxes */ } .collapse + input + div{ display:none; } .collapse + input:checked + div{ display:block; } 

 <label class="collapse" for="_1">Collapse 1</label> <input id="_1" type="checkbox"> <div>Content 1</div> <label class="collapse" for="_2">Collapse 2</label> <input id="_2" type="checkbox"> <div>Content 2</div> 

Answer 2

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

 input[type=checkbox]:checked + p { display: none; } 

的jsfiddle

相邻的兄弟select器

Answer 3

我喜欢Roko的答案，并添加了几行，以便在元素隐藏时获得一个正确的三angular形，并在显示时closures：

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

Answer 4

当然！ jQuery只是一个利用javascript的图书馆。

您可以使用document.getElementById获取有问题的元素，然后通过element.style.height相应地更改其高度。

 elementToChange = document.getElementById('collapseableEl'); elementToChange.style.height = '100%'; 

把它放在一个整齐的小function里，可以来回切换，而且你有自己的解决scheme。