javascript - 带有CSS的可折叠div

Question

我正在开发移动应用程序。我有以下虚拟代码。目前它正在从下到上折叠，即当我点击前 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

Answer 1

不要以这种方式使用目标，而是制作 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