JQuery 隐藏元素和子元素

Question

我正在尝试在网站上制作常见问题解答。它工作得很好，但是，一个答案包含一个表格，单击问题时不会隐藏。

如何调整我的 JQuery 代码，使其在我单击问题时消失？

我的代码:

HTML:
    <section class="faqs sections">
            <h1>Frequently asked Questions</h1>
            <p class="question">question1?  </p>
            <p class="answer">blabla  </p>

            <p class="question">question2?  </p>
            <p class="answer">Bla Bla --> See table:
                <table>
                <tr><td>Info</td><td>Text</td></tr>
                <tr><td>Info</td><td>Text</td></tr>
                </table>
            </p>
    </section>

CSS:
.question {
      color: #009fdb;
      display: block;
      font-size: 12px;
      margin: 15px 0 5px;
      width: 100%;
}

.question:hover{
    cursor: pointer;
}

.answer {
    display: none;
}

JQuery:
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    $('.faqs .question').append('<span class="plus">+</span>');

    $('.faqs .question').click(function() {
        $(this).next('p').slideToggle('fast');
        question = $(this);
        if (question.children().hasClass('plus'))
            $(this).find('.plus').replaceWith('<span class="minus">-</span>');
        else
            $(this).find('.minus').replaceWith('<span class="plus">+</span>');
    });
  </script>

Answer 1

问题是<table>是 <p> 的无效 child 所以它被移出那个 <p>通过浏览器

当您在浏览器开发工具元素检查器中检查实时 html 时，您可以自己看到这一点

使用 <div>代替 parent

DEMO