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

tr.spaceUnder{display:none;}

jQuery:

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

あなたが抱えている主な問題は、表示/非表示にする正しい要素を選択する方法を見つける必要があることだと思います。ただし、コードには各コード ブロックを個別に指定する方法がありません。上記の方法 (およびその他の方法) でこれを実行できるはずです。または、(フロントエンド開発者の観点からはより簡単です) クリック可能およびトグル可能領域のそれぞれに、おそらく id を使用して、主キーを使用して html でラベルを付けることができます。または、これが由来するデータベースのデータ フィールドからインデックスを作成します。これはデータベースから来ていると思います。

于 2013-01-16T17:17:05.083 に答える
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 に答える