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>的无效儿童，因此浏览器将其移出<p>

当您在浏览器开发工具元素检查器

中检查实时html时，您可以自己查看

使用<div>代替父母

的 DEMO

JQuery Hide元素和子元素

1 个答案: