1

ページでコンテンツの表示/非表示機能を機能させようとしています:

<div>
    <div class="t">             
        <h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
    </div>

    <section class="title1 title">
        <div class="cat">
            <p>Category 1<span>This is the first category</p>
        </div>

        <div class="cat">
            <p>Category 2<span>This is the second category</p>
        </div>

        <div class="cat">
            <p>Category 3<span>This is the third category</p>
        </div>
    </section>
</div>

かなりシンプルにまとめたと思います。基本的に、セクションごとに、このマークアップが繰り返されます。sectionリンクをクリックすると、jquery は、リンクのコンテナー div とピア レベルにある を表示/非表示にする必要があります。

これが私が持っているものです。エラーは発生しませんが、セクションも非表示になりません。ただし、リンクのテキストは変更されます。

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

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

ここで根本的に重要な何かが欠けている可能性があると思うので、誰かが私が間違っていることを理解するのを手伝ってくれるなら、あなたの助けは大歓迎です.

ティア:)

4

2 に答える 2

6

を使用している理由がわからない場合は.each()、次のように動作するはずです。

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

    if (show) {
        $(this).parents("div").siblings("section").fadeIn(500);
    }
    else
    {
        $(this).parents("div").siblings("section").fadeOut(500);
    }
    $(this).text(show ? "-" : "+");
});
于 2012-11-30T13:08:14.427 に答える
0

ピアを非表示にする場合はsiblings()、それらを識別するために使用できます。

$('.sh').click(function() {
    var show = ($(this).text() === "+");
     if (show) {
        $(this).parents("div").siblings("section").fadeIn(500);
    } else {
        $(this).parents("div").siblings("section").fadeOut(500);
    }
    $(this).text(show ? "-" : "+");
});

http://jsfiddle.net/RvHhd/

于 2012-11-30T13:19:31.780 に答える