使用HTML和CSS显示/隐藏div块中的元素

Question

我想显示/隐藏div块中的元素。类似的post向我展示了如何，但我无法使div块内的链接正常工作。

的DIV块：

<div class="collapse" tabindex="1"> 
<h1> Test </h1> 
<p><a href="www.google.com">link</a></p> 
<p>some other text</p> 
</div> 

的CSS部分：

.collapse > * + *{ 
display:none; 
} 
.collapse:focus > * + *{ 
display:block; 
} 

这里是我的脚本的JSFiddle。

基本上，当我点击链接时，div块崩溃。 你知道我该如何解决这个问题？谢谢！！

Answer 1

你不能用CSS本地执行此操作，必须使用JavaScript。这里是我的代码：

HTML：

<h1><a href="#" class="clickme">Test</a></h1> 
<div class="show-on-click"> 
    <a href="www.google.com">link</a> 
    <p>some other text</p> 
</div> 

CSS：

.show-on-click { 
    display: none; 
} 
.show-on-click.is-active { 
    display: block; 
} 

的JavaScript（jQuery的）：

$(".clickme").on("click", function() { 
    $(".show-on-click").toggleClass("is-active"); 
}); 

我希望这一切才有意义。对不起，我不得不大肆屠杀你的代码来实现它。我更新了你的jsfiddle here。