jQuery的常见问题不在表内切换？

Question

我已插入此脚本：您可能会说，我正在尝试在单击问题单元格时显示“答案”单元格。 请记住，我列出了这些问题和答案。 这似乎不起作用。

 jQuery(".qs").click(function() { $(this).next(".ans").toggle(); }); 

 .ans { display: none; } 

 <div data-foldup="yes" class="bg_faq_content_section"> <h4>App fundamentals</h4> <div class="questions"> <table class="faqs" style="width:100%"> <tr> <td class="qs"><a>1. How does LenDen Work?</a></td> <td class="ans">Answer</td> </tr> <tr> <td class="qs"><a>2. Different modes of transaction?</a></td> <td class="ans">Answer</td> </tr> <tr> <td class="qs"><a>3. Reliability of donate option?</a></td> <td class="ans">Answer</td> </tr> <tr> <td class="qs"><a>4. What you can sell?</a></td> <td class="ans">Answer</td> </tr> <tr> <td class="qs"><a>5. What you can&#8217;t sell?</a></td> <td class="ans">Answer</td> </tr> <tr> <td class="qs"><a>6. How to disable your account?</a></td> <td class="ans">Answer</td> </tr> </table> </div> </div> 

Answer 1

 jQuery(".qs").click(function() { $(this).next(".ans").toggle(); }); 

 .ans { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table class="faqs" style="width:100%"> <tr> <td class="qs"><a>1. Question?</a></td> <td class="ans">Answer</td> </tr> </table> 

您忘记了包含jQuery库；这就是为什么它无法正常工作的原因，我已在代码中添加了它。 您现在可以在工作状态下检查代码。

Answer 2

您需要使用.siblings（） ：

 jQuery(".qs").click(function() { $(this).siblings(".ans").toggle(); }); 

 .ans { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="faqs" style="width:100%"> <tr> <td class="qs"><a>1. Question?</a></td> <td class="ans">Answer</td> </tr> </table> 

Answer 3

只需调用.next（）即可：

> jQuery(".qs").click(function() {
$(this).next().toggle();
});