Html 单击标题并展开文本而不使用 JavaScript / jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12461183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click header and expand text without using JavaScript / jQuery
提问by Jo?o Fernandes
As pointed out in the title, my question is very simple: is there any way that I can achieve clicking on a header (title) and expand (and collapse) a text associated with it, without using JavaScript nor jQuery? Is there any browser compatible way of doing this (IE 6+ proof)?
正如标题中所指出的，我的问题很简单：有什么方法可以实现单击标题（标题）并展开（和折叠）与之关联的文本，而不使用 JavaScript 或 jQuery？是否有任何浏览器兼容的方式来做到这一点（IE 6+ 证明）？
I've made a very simple HTML+CSS site for a conference, and I would like to use JS only if necessary. So, I'm just asking if I can do it sticking only to HMTL/CSS, in a compatible way, of course.
我为会议制作了一个非常简单的 HTML+CSS 站点，我想只在必要时使用 JS。所以，我只是问我是否可以仅以兼容的方式坚持使用 HMTL/CSS，当然。
The few solutions I've found are old or incompatible with some browser versions.
我发现的少数解决方案是旧的或与某些浏览器版本不兼容。
Thank you very much, Jo?o
非常感谢，乔?
回答by Ana
IE6-proof pure CSS solution?
IE6-proof 纯 CSS 解决方案？
NO
不
[Leave the dead rest in their graves, don't try to make them run a marathon. That's what you're doing when you're asking for IE6 to do things like this.]
[让死者安息在他们的坟墓里，不要试图让他们跑马拉松。当你要求 IE6 做这样的事情时，这就是你正在做的事情。]
IE7/8?
IE7/8？
Yes, there is one solution (the principle is the same one used in this older demo of mine), but it is not persistent (meaning that if you click anywhere else on the page, your expanded content will collapse) and it behaves a bit weird in IE7 (meaning that you have to hover off the clicked element after you click it in order to see your content expanding).
是的，有一个解决方案（原理与我的这个旧演示中使用的原理相同），但它不是持久的（意味着如果您单击页面上的任何其他位置，您展开的内容将折叠）并且它的行为有点在 IE7 中很奇怪（这意味着您必须在单击后将鼠标悬停在被单击的元素上才能看到您的内容扩展）。
IE9+ and the other browsers?
IE9+ 和其他浏览器？
YES!Also persistent. Same principle as the one I used here.
是的！还执着。与我在这里使用的原理相同。
JavaScript/ jQuery method?
JavaScript/jQuery 方法？
Yes!See this: a jQuery version of the same demo.
是的！请参阅：同一演示的 jQuery 版本。
回答by Stew Dellow
You can do simple Hover dropdown menus with just HTML & CSS which are supported cross browser:
您可以使用跨浏览器支持的 HTML 和 CSS 来制作简单的 Hover 下拉菜单：
You can improve on this with fades or slidedowns with CSS transitions which are not supported in lower version of IE:
您可以使用较低版本的 IE 不支持的 CSS 过渡淡入淡出或向下滑动来改进这一点：
Not so much with clicking though.
虽然点击不是那么多。
