Question

我正在为我的网站制作常见问题解答。

代码：

<div style='margin: auto; width: 750px;'>
  <a href='#q0' onClick="show2('q1')" class='faqahr'>
    <div class='faqquest'>
      <i class="fa fa-question"></i> Question 1
    </div>
    <div id='q1' style='display: none;' class='faqaw'>
      The answer 1
      <br />1
    </div>
  </a>
  <p />

  <a href='#q1' onClick="show2('q2')" class='faqahr'>
    <div class='faqquest'>
      <i class="fa fa-question"></i> Question 2
    </div>
    <div id='q2' style='display: none;' class='faqaw'>
      The answer 2
      <br />2
    </div>
  </a>
  <p />

  <a href='#q2' onClick="show2('q3')" class='faqahr'>
    <div class='faqquest'>
      <i class="fa fa-question"></i> Question 3
    </div>
    <div id='q3' style='display: none;' class='faqaw'>
      The answer 3
      <br />3
    </div>
  </a>
</div>

在传递鼠标的第一个div上，所有检测到div：http://prntscr.com/e5zw9m

但是，如果我传递文字并且不在div上，那么我只传递问题2。

我的功能：

<script>
  function show2(obj) {
    var x = document.getElementById(obj);
    if (x.style.display == 'none') {
      x.style.display = 'block';
    } else {
      x.style.display = 'none';
    }
  }
</script>

抱歉我的英语不好，谢谢你的帮助。

Answer 1

如果您希望它按照您的意愿工作，请正确编写段落标记，而不是仅使用结束标记！

<div style='margin: auto; width: 750px;'>
<a href='#q0' onClick="show2('q1')" class='faqahr'>
    <div class='faqquest'>
        <i class="fa fa-question"></i> Question 1
    </div>
    <div id='q1' style='display: none;' class='faqaw'>
        The answer 1
        <br />1
    </div>
</a>
<p></p>

<a href='#q1' onClick="show2('q2')" class='faqahr'>
    <div class='faqquest'>
        <i class="fa fa-question"></i> Question 2
    </div>
    <div id='q2' style='display: none;' class='faqaw'>
        The answer 2
        <br />
    </div>
</a>
<p></p>

<a href='#q2' onClick="show2('q3')" class='faqahr'>
    <div class='faqquest'>
        <i class="fa fa-question"></i> Question 3
    </div>
    <div id='q3' style='display: none;' class='faqaw'>
        The answer 3
        <br />3
    </div>
</a>

或者你可以使用break标签

我相信你可以用更好的方式实现相同的行为。Bootstrap accordion将是有用的

CSS faq第一个div工作，然后没有

1 个答案: