-1

所以我有这样的桌子

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

2 回答 2

0

这个小提琴应该给你一个起点。

CSS

.spaceUnder{display:none;}

JS

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

更新 更新的小提琴

$('tr:not(.spaceUnder)').click(function(){
   $(this).nextUntil('tr:not(.spaceUnder)').toggle()
});
于 2013-01-16T17:00:09.813 回答
0

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

CSS：

tr.spaceUnder{display:none;}

jQuery：

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

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

于 2013-01-16T17:17:05.083 回答