JQuery 隐藏元素和子元素
JQuery Hide element and children
我正在尝试在网站上制作常见问题解答。它工作得很好,但是,一个答案包含 table,单击问题时不会隐藏。
如何调整我的 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>
问题是 <table>
是 <p>
的无效子项,因此它正被浏览器<p>
移出
您可以在浏览器开发工具元素检查器
中检查实时 html 时亲眼看到
改为使用 <div>
作为父项
我正在尝试在网站上制作常见问题解答。它工作得很好,但是,一个答案包含 table,单击问题时不会隐藏。
如何调整我的 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>
问题是 <table>
是 <p>
的无效子项,因此它正被浏览器<p>
移出
您可以在浏览器开发工具元素检查器
中检查实时 html 时亲眼看到改为使用 <div>
作为父项