[英]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>
I found this great link http://jsfiddle.net/ionko22/4sKD3/ regarding collapsible
div using CSS. 我发现这个很棒的链接http://jsfiddle.net/ionko22/4sKD3/关于使用CSS的
collapsible
div。 Is there a way to have question 1 always open without clicking on it when you visit the page. 有没有办法让问题1始终打开,而不是在您访问页面时单击它。 And make it collapse when you click on any other questions.
当你点击任何其他问题时,它会崩溃。 Also is there a way to
close
the div/questions by clicking on itself? 还有办法通过点击自己
close
div /问题吗? I would be very grateful if you can reply to this. 如果你能回答这个问题,我将非常感激。
http://jsfiddle.net/4sKD3/821/ http://jsfiddle.net/4sKD3/821/
Add this to the CSS to make the first question appear by default: 将其添加到CSS以使默认情况下显示第一个问题:
.faq ul li:first-of-type div {
display: block;
}
And add this jQuery for toggling: 并添加此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();
}
});
I've been playing with this for a good two hours now using first-child
, .current
, :not
syntax and a variety of class combinations. 我一直在玩这个,现在使用的好2小时
first-child
, .current
, :not
语法和各种类的组合。 I think it's safe to say that displaying the first div to begin with, then having it disappear when another is the :target
isn't possible with just pure CSS and HTML. 我认为可以肯定地说,显示第一个div开始,然后让它消失,当另一个是
:target
是不可能只有纯 CSS和HTML。
I got it to the point where the first question was display: block;
我明白第一个问题就是
display: block;
, and all the others were going on and off when another was active, however the first question was always active throughout. 当其他人活跃时,所有其他人都在上下,但第一个问题始终是活跃的。
So, in answer to your question: 所以,回答你的问题:
No, I am 95% sure it is not possible with the markup above, as each div is in its own individual li
. 不,我95%肯定上面的标记是不可能的,因为每个div都在它自己的个体
li
。 I was hoping I could prove myself wrong, but I cannot. 我希望我能证明自己是错的,但我不能。 If someone else can achieve this then they'll certainly be getting an up-vote from me.
如果其他人能够做到这一点那么他们肯定会得到我的投票。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.