Html 使用纯 CSS 展开和折叠文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22565884/
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
Expand and collapse text with pure CSS?
提问by user3325861
I have a category descrption in HTML as simple as seen below but i want to keep the "childs" hidden("mother" always visible) and show the childs when an user click on the "mother" then hide the childs again when mother is clicked but the childs are not hidden. I don't want to user Java Script, can it be done with pure CSS?
我在 HTML 中有一个类别描述，如下所示简单，但我想隐藏“孩子”（“母亲”始终可见）并在用户单击“母亲”时显示孩子，然后在母亲在时再次隐藏孩子单击但孩子们没有隐藏。我不想使用 Java Script，可以用纯 CSS 来完成吗？
<a href="">MOTHER CATEGORY <br>
<a href="">Child 1 </a><br>
<a href="">Child 2 </a><br>
<a href="">Child 3 </a><br>
<a href="">Child 4 </a><br>
<a href="">Child 5 </a><br>
<a href="">MOTHER CATEGORY 2<br> (...)
采纳答案by user3325861
OnClick events have to involve a little bit of JS.
OnClick 事件必须涉及一点点 JS。
Else, here's a nifty little hack by Chris Coyier - http://css-tricks.com/the-checkbox-hack/
否则，这是 Chris Coyier 的一个漂亮的小技巧 - http://css-tricks.com/the-checkbox-hack/
回答by seancdavis
It canbe. Check out the link David shared: Pure CSS collapse/expand div
它可以是。查看 David 分享的链接：Pure CSS collapse/expand div
However, what is keeping you from using JavaScript? I find it to be significantly simpler for expandable and collapsable containers.
但是，是什么让您无法使用 JavaScript？我发现可扩展和可折叠容器要简单得多。
If you load the jQuery library, then all you need is:
如果您加载 jQuery 库，那么您只需要：
$('.trigger').click(function() {
$('.container').toggleClass('active');
});
Here you'd add a class of triggerto the anchor you want to click and a class of containerto your container. Then you can handle all your styles and transitions via pure CSS (by using the activeclass).
在这里，您将向trigger要单击的锚点添加一个类，并将一个类添加container到您的容器中。然后，您可以通过纯 CSS（通过使用active类）处理所有样式和过渡。
This minimizes the code you have to write and keeps everything nice and simple and clean.
这最大限度地减少了您必须编写的代码，并保持一切美好、简单和干净。
回答by suraj rawat
yes you can do it by checked event in radio button
是的，您可以通过单选按钮中的选中事件来完成
see the link for more understanding :
but it won't work in older browsers*
但它在旧浏览器中不起作用*
