0

フォーラム ページのカテゴリ リストの更新に取り組んでいます。

HTML5 を利用するために大規模な構造変更を行ったため、タイトルごとにカテゴリを表示/非表示にする JQuery を変更する必要が生じました。

新しい JQuery と HTML5 の構造は次のとおりです。

http://jsfiddle.net/LYoung/JLVEs/1/

<div class="t">
    <h2><a href="#" class="sh">-</a> Gaming</h2>
</div>
<section>
    <div class="cat">
        <p><a class="catlnk" href="display.php?cat=General-Gaming&page=1">General Gaming</a><span>No work here, just play!</span></p>
    </div>
    <div class="cat">
        <p><a class="catlnk" href="display.php?cat=World-of-Warcraft&page=1">World of Warcraft</a><span>WOW specific discussion. No other games please.</span></p>
    </div>
</section>

そして私が使用しているJQuery：

$(".sh").click(function() {
    var show = ($(this).text() === "+");

    if (show) {
        $(this).parent().parent("div").siblings("section").fadeIn(500);
    }
    else {
        $(this).parent().parent("div").siblings("section").fadeOut(500);
    }
    $(this).text(show ? "-" : "+");
});

奇妙なことは、これがjsfiddleで完全にうまく機能することです。それは私が期待していることとまったく同じですが、私のウェブページでは、すべてのカテゴリを表示/非表示にします。

誰かが理由を理解し、解決策を提供するのを手伝ってくれますか?

4

2 に答える 2

2

問題は、実際のページに個々のカテゴリをラップする <div class="title"> がないことです。したがって、兄弟メソッドを使用すると、リスト内のすべての <section> タグが選択されます。

于 2012-12-08T18:59:31.010 に答える
0

すべての兄弟を非表示にする代わりに、divに続くセクションのみを非表示にすることをお勧めします。そして、親を2回使用する必要はありません：

if (show) {
    $(this).closest("div").next("section").fadeIn(500); // if possible make the selector it more specific using "div.t"
} else {
    $(this).closest("div").next("section").fadeOut(500);
}
于 2012-12-08T18:46:47.150 に答える