我正在开发移动应用程序。我有以下虚拟代码。目前它正在从下到上折叠,即当我点击前 3 个链接时,问题被隐藏,你只能看到答案。
是否可以在点击链接时同时显示问题和答案。如果不是 javascript,最好只使用 CSS。
.faq ul li {
display:block;
padding:5px;
line-height: 8;
}
.faq ul li div {
display:none;
}
.faq ul li div:target {
display:block;
}
<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>
fiddle :jsfiddle.net/4sKD3/858
最佳答案
不要以这种方式使用目标,而是制作 id
和 href
<a>
相同并使用 +
相邻选择器,使其适合您。
.faq ul li {
display: block;
padding: 5px;
line-height: 8;
}
.faq ul li div {
display: none;
}
.faq ul li a:target + a + div {
display: block;
}
<div class="faq">
<ul>
<li>
<a href="#question1" id="question1">Question 1</a> <a href="#close1" id="close1">Close</a>
<div>Answer 1</div>
</li>
<li>
<a href="#question2" id="question2">Question 2</a>
<div>Answer 2</div>
</li>
<li>
<a href="#question3" id="question3">Question 3</a>
<div>Answer 3</div>
</li>
<li>
<a href="#question4" id="question4">Question 4</a>
<div>Answer 4</div>
</li>
<li><a href="#question5" id="question5">Question 5</a>
<div>Answer 5</div>
</li>
<li>
<a href="#question6" id="question6">Question 6</a>
<div>Answer 6</div>
</li>
</ul>
</div>
现在有了 <a>
作为 id
的目标同样,它会跳入问题并在其旁边显示答案。希望这就是您所期待的。我改变了 id
至 <a>
并使用相邻的选择器来定位 <div>
这样:
.faq ul li a:target + div
浏览器兼容性,世界上所有浏览器! :P
关于javascript - 带有CSS的可折叠div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32308301/