Question

我在HTML中有一个类别描述，如下所示，但我想保留＆＃34;孩子＆＃34;隐藏（＆＃34;母亲＆＃34;始终可见）并在用户点击＆＃34;母亲＆＃34;时显示孩子。然后在点击母亲但孩子不被隐藏时再次隐藏孩子。我不想使用Java Script，可以用纯CSS吗？

<a href="">MOTHER CATEGORY <br>
&nbsp;&nbsp;<a href="">Child 1 </a><br>
&nbsp;&nbsp;<a href="">Child 2 </a><br>
&nbsp;&nbsp;<a href="">Child 3 </a><br>
&nbsp;&nbsp;<a href="">Child 4 </a><br>
&nbsp;&nbsp;<a href="">Child 5 </a><br>

<a href="">MOTHER CATEGORY 2<br> (...)

Answer 1

OnClick事件必须涉及一些JS。

另外，这是Chris Coyier的一个漂亮的小黑客 - http://css-tricks.com/the-checkbox-hack/

Answer 2

可以。查看David分享的链接：Pure CSS collapse/expand div

然而，是什么阻止您使用JavaScript？我发现它对于可扩展和可折叠的容器来说要简单得多。

如果你加载了jQuery库，那么你只需要：

$('.trigger').click(function() {
  $('.container').toggleClass('active');
});

在这里，您需要为要点击的锚点添加一个trigger类，并为您的容器添加一个container类。然后，您可以通过纯CSS处理所有样式和过渡（使用active类）。

这样可以最大限度地减少您必须编写的代码，并使所有内容保持简洁和干净。

Answer 3

是的，你可以通过单选按钮中的选中事件

来完成

see the link for more understanding :

click here

但它不适用于旧浏览器*

使用纯CSS扩展和折叠文本？

3 个答案: