[英]CSS collapse/expand div
<style>
.faq ul li {
display: block;
float: left;
padding: 5px;
}
.faq ul li div {
display: none;
}
.faq ul li div:target {
display: block;
}
</style>
<div class="faq">
<ul>
<li><a href="#question1">Question 1</a>
<div id="question1">Answer 1 </div>
</li>
<li><a href="#question2">Question 2</a>
<div id="question2">Answer 2 </div>
</li>
<li><a href="#question3">Question 3</a>
<div id="question3">Answer 3 </div>
</li>
<li><a href="#question4">Question 4</a>
<div id="question4">Answer 4 </div>
</li>
<li><a href="#question5">Question 5</a>
<div id="question5">Answer 5 </div>
</li>
<li><a href="#question6">Question 6</a>
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>
我發現這個很棒的鏈接http://jsfiddle.net/ionko22/4sKD3/關於使用CSS的collapsible
div。 有沒有辦法讓問題1始終打開,而不是在您訪問頁面時單擊它。 當你點擊任何其他問題時,它會崩潰。 還有辦法通過點擊自己close
div /問題嗎? 如果你能回答這個問題,我將非常感激。
http://jsfiddle.net/4sKD3/821/
將其添加到CSS以使默認情況下顯示第一個問題:
.faq ul li:first-of-type div {
display: block;
}
並添加此jQuery以進行切換:
$(".faq ul li").click(function() {
if( $( this ).children( "div" ).css( "display" ) == "none" ) {
$( ".faq ul li div" ).hide();
$( this ).children( "div" ).show();
} else {
$( ".faq ul li div" ).hide();
}
});
我一直在玩這個,現在使用的好2小時first-child
, .current
, :not
語法和各種類的組合。 我認為可以肯定地說,顯示第一個div開始,然后讓它消失,當另一個是:target
是不可能只有純 CSS和HTML。
我明白第一個問題就是display: block;
當其他人活躍時,所有其他人都在上下,但第一個問題始終是活躍的。
所以,回答你的問題:
不,我95%肯定上面的標記是不可能的,因為每個div都在它自己的個體li
。 我希望我能證明自己是錯的,但我不能。 如果其他人能夠做到這一點那么他們肯定會得到我的投票。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.