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>

小提琴：jsfiddle.net/4sKD3/858

Answer 1

不要以这种方式使用目标，而是为id设置href和<a>，并使用+相邻选择器使其适合您。< / p>

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

现在将<a>作为id的目标，它会跳出问题并显示旁边显示的答案。希望这是你所期待的。我将id更改为<a>并使用相邻的选择器以此方式定位<div>：

.faq ul li a:target + div

浏览器兼容性，世界上每个浏览器！ :P

可折叠的div与css

1 个答案: