javascript - CSS 常见问题解答第一个 div 工作，下一个不工作

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

但是我传递问题 2 只有在传递文本而不传递 div 时才有效。

我的功能:

<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会有用的