Jquery 基于单击其他行隐藏/显示表中的行

我有这样的桌子

Moscow
 Moscow Shop 1
 Moscow Shop 2
 Moscow Shop 3
Kazan
 Kazan Shop 1
 Kazan Shop 2
 Kazan Shop 3

我想要的是把这张桌子打开

Moscow
Kazan

然后当你点击莫斯科

这张桌子应该是这样的

Moscow
 Moscow Shop 1
 Moscow Shop 2
 Moscow Shop 3
Kazan

这是我目前的加价

<table id="whereToBuyContentTable" class="whereToBuyTable">
        <tbody>
        <tr class="countryRow categoryHeader">
            <td colspan="3" class="">
                <span class="listItemHeader">
                    Moscow
                </span>
            </td>
            <td>
                <a href="#" style="float: right;"><img width="20"  src="/Resources/Images/sBackTopPic.png"></a>
            </td>
        </tr>
                <tr class="spaceUnder">
                    <td width="30"></td>
                    <td>
                        <p><b>ООО ""</b></p>
                        <p class="">Адрес: </p>
                        <p class=""></p>
                        <p class="depth3"></p>
                        <p class="">Web: <a target="_blank" href=""></a></p>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
        <tr class="countryRow categoryHeader">
            <td colspan="3" class="">
                <span class="listItemHeader">
                    Kazan
                </span>
            </td>
            <td>
                <a href="#" style="float: right;"><img width="20"  src="/Resources/Images/sBackTopPic.png"></a>
            </td>
        </tr>
                <tr class="spaceUnder">
                    <td width="30"></td>
                    <td>
                        <p><b>ООО ""</b></p>
                        <p class="">Адрес: </p>
                        <p class=""></p>
                        <p class="depth3"></p>
                        <p class="">Web: <a target="_blank" href=""></a></p>
                    </td>
                    <td></td>
                    <td></td>
                </tr>

                <tr class="spaceUnder">
                    <td width="30"></td>
                    <td>
                        <p><b>ООО ""</b></p>
                        <p class="">Адрес: </p>
                        <p class=""></p>
                        <p class="depth3"></p>
                        <p class="">Web: <a target="_blank" href=""></a></p>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
</table>

应该给你一个起点

CSS

JS

更新

---

有一百万种方法可以做到这一点。因为这些是表格，我假设您使用的是表格，所以这是动态表格数据

CSS:

jQuery：

$("tr.categoryHeader").click(function(){$(this+" + tr.spaceUnder").toggle();});

---

我认为，您遇到的主要问题是，您需要找到一种方法来选择要显示/隐藏的正确元素。但是，您的代码无法离散地指定每个代码块。上面的方法加上其他方法应该能够做到这一点，或者，从前端开发人员的角度来看，更简单的方法是使用html标记每个可单击和可切换区域，可能使用id，使用来自数据库的数据字段中的主键或索引。我假设这是来自一个数据库

你是想用JavaScript还是纯CSS来实现这一点？我想用JavascriptAye来实现这一点。这很好，只是打开和关闭城市下的第一行。我怎么能打开城市下的所有tr，直到我找到一个新城市的tr。看看。下一个，直到这个。更新的回答是的，很好。谢谢！

$('tr:not(.spaceUnder)').click(function(){
   $(this).next().toggle()
});

$('tr:not(.spaceUnder)').click(function(){
   $(this).nextUntil('tr:not(.spaceUnder)').toggle()
});

tr.spaceUnder{display:none;}

$("tr.categoryHeader").click(function(){$(this+" + tr.spaceUnder").toggle();});