如何使用JQuery在HTML和TR之间进行协调

我有一个表格，其中我使用

tr

作为标题。一些

tr

有一个类

手风琴

。我需要在默认情况下切换所有的

accordion

类。一旦我点击它，它就会打开所有后续的

tr

，直到它找到下一个

手风琴类。例如如果我点击
tr
，它的类为
cities
。它应该只打开下两个
tr
（曼谷和圣保罗）。但到目前为止还不知道怎么做

HTML

    <table class="form-table">
        <tbody>
            <tr valign="top" class="fruits accordion"></tr>
            <tr valign="top" class="orange"></tr>
            <tr valign="top" class="apple"></tr>
            <tr valign="top" class="cities accordion"></tr>
            <tr valign="top" class="bangkok"></tr>
            <tr valign="top" class="são paulo"></tr>
            <tr valign="top" class="countries accordion"></tr>
            <tr valign="top" class="brazil">
            <tr valign="top" class="england">
        </tbody>
    </table>

使用
nextUntil（）。它收集所有同级，直到传递给它的选择器为止

$(".form-table tr:not(.accordion)").hide(); /* replace this with CSS , more efficient */

$(".form-table tr.accordion").click(function () {
    $(this).nextUntil('.accordion').stop(true, true).fadeToggle(500);
});


表元素动画不好，你可能想考虑改变结构

$(".form-table tr:not(.accordion)").hide(); /* replace this with CSS , more efficient */

$(".form-table tr.accordion").click(function () {
    $(this).nextUntil('.accordion').stop(true, true).fadeToggle(500);
});