1

各行にネストされた領域のデータが表示されるテーブルがあります。ネストされていると言うときは、HTMLではなく、領域が互いにどのように関連しているかを意味します。複数のリージョンを含む複数の国。複数のサブリージョンが含まれます（LA-地方自治体）。LA行が非常に多いため、デフォルトでは非表示になっています。

これらの行をWindowsフォルダービューのように動作させたいのですが、リージョンをクリックするとLA行が表示/非表示になります。国名をクリックすると、その国のすべての地域とそのLAが表示/非表示になります。他の国で以前に表示/非表示にしたものは何でも影響を受けません。

私はこれを.nextUntilメソッドを介してリージョンレベルで機能させています。修正方法がわからないのは、国レベルで同じ方法が機能せず、期待どおりに地域が非表示になることですが、toogleを使用しているため、非表示のLAが表示されます。

LA行が表示されているか非表示になっているかに関係なく、国名をクリックして地域とそのLAを非表示にする方法に関するアイデアはありますか？また、もう一度クリックすると、それらのLAの以前の状態が表示されると便利ですが、必須ではありません。すべて閉じても大丈夫です。

ここでのデモ：http：//fluent-interaction.co.uk/temp/table/tabletest.html

私のjQuery：

$(document).ready(function() {
$(".rowLA").hide();
$(".rowCountry th p").addClass("toggleClose");
$(".rowCountry th p").click(function() {
    $(this).closest(".rowCountry").nextUntil(".rowCountry").toggle();
    $(this).toggleClass("toggleClose");
});
$(".rowRegion th p").click(function() {
    $(this).closest(".rowRegion").nextUntil(".rowRegion, .rowCountry").toggle();
    $(this).toggleClass("toggleClose");
});

}）;

4

1 に答える 1

1

追加してみてください

$(this).closest(".rowCountry").nextUntil(".rowCountry",".rowLA").hide();

この行の後:

$(this).closest(".rowCountry").nextUntil(".rowCountry").toggle();

これにより、その国内のすべての LA が非表示になります。

なぜあなたがすべてのステートメントでclosest()を使用したのか疑問に思っています...!

于 2012-08-31T11:20:36.093 に答える