使用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。