Question

所以我有这样的表

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

这是我目前的Mark up

<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>

Answer 1

This fiddle应该给你一个起点。

<强> CSS

.spaceUnder{display:none;}

<强> JS

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

更新 Updated Fiddle

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

Answer 2

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

CSS：

tr.spaceUnder{display:none;}

jQuery的：

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

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

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

2 个答案: