2

この show-hide 関数は、ターゲット div の一意の ID を維持する必要なく、匿名でこれを行おうとします。

var div例 #4 でセレクターが機能しない理由と、表示されているすべての例でセレクターを機能させる方法を理解するのに苦労しています。

$('.expander').click(function(e)
{
    e.preventDefault();
    var div = $(this).nextAll('div.content').first();
    if (div)
    {
        if (div.css('display') == "none")
        {
            div.show();
            $(this).removeClass("closed");
            $(this).addClass("open");
        }
        else
        {
            div.hide();
            $(this).removeClass("open");
            $(this).addClass("closed");
        }
    }
});

<div>
    <a href="#" class="expander open">example 1</a><br />
    <div class="content open">shown content</div>
    <a href="#" class="expander closed">example 2</a><br />
    <div class="content closed">hidden content</div>
    <a href="#" class="expander closed">example 3</a><br />
    <!-- comments -->
    <span>other content</span>
    <div class="content closed">hidden content</div>
    <p>
        <span>
            <a href="#" class="expander closed">example 4</a>
        </span>
    </p>
    <div class="content closed">content</div>
</div>

最初の 3 つの例は問題なく動作します。しかし、このコードを展開したところ、アンカーのコーディング方法にバリエーションがあることがわかりました。アンカーがどのようにカプセル化されているかに関係なく機能するソリューションを探しています。

肝心なのは、アンカーの次の div.content を選択したいということです。それが次であるかどうか、または jQuery がそれを見つけるために DOM ツリーを少し上る必要があるかどうかにかかわらずです。

このコードの作業モデルはこちらにあります。

4

2 に答える 2

1

あなたが錨を下ろすのはnested inside a span、これもまた中に入れ子になっているからですa ptag

そして、これは例＃4の場合には意味がありません
var div = $(this).nextAll('div.content').first();

たとえば、＃4にはこのセレクターが必要です

var div = $(this).closest('p').nextAll('div.content').first();
于 2012-10-11T17:03:09.457 に答える
0

次のターゲット div が表示されるまで、親ツリーを上っていきます。

var div = $(this).nextAll('div.content').first();
if (div.length == 0)
{
    div = $(this).parentsUntil('body').nextAll('div.content').first();
}

条件式はあまり好きではありませんが、もっとエレガントなものが見つからない限り、これを使い続けます。

于 2012-10-11T20:24:23.200 に答える