1

私はこのコードのビットに苦労しています、そしてそれが可能であるかどうかさえわかりません。単一の親要素内にdivのリストがあり、特定のセットを折りたたんで展開する必要があります。次に例を示します。

<div id="parent">
  <div class="alway_show">ALWAYS SHOW ME</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="alway_show">ALWAYS SHOW ME</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
</div>

したがって、初期状態では、.collapse_meはdisplay：noneになります。その特定の.always_showdivの下に折りたたまれたdivのみを展開するためのリンクがalwaysshowにあります。折りたたみ可能なdivが独自のdivにある場合、これは1,000万倍簡単になることはわかっていますが、コードを制御することはできません。jqueryを使用してそのまま動作させる必要があります。可能？

4

3 に答える 3

3 
$('div.always_show').nextAll().each(function() {
    if($(this).is('.collapse_me')) {
        $(this).toggle();
    }
    else {
        //this will halt the each "loop", stopping before the next .always_show
        return false; 
    }
});

もちろん、最初の selector'div.always_show'を使用するのではなく、クリックされたリンクの親となる実際の要素を指定する必要があります。例えば：

$('#expand_anchor').parent().parent().nextAll()...
于 2009-09-25T19:43:35.250 に答える
0 
var fncdiv = function(){
    var el = this;
    do{
        el = $(el).next();
        if ($(el).hasClass("collapse_me") )
            $(el).toggle();
        else
            break;

    }while (true) 
};

$('#parent div.alway_show').bind("click", fncdiv);
于 2009-09-25T19:38:14.530 に答える
-1

jQuery を使用する必要はありません。いくつかの巧妙な CSS だけが必要です。

#parent
{
    /* normal parent css here */
}

#parent div
{
  display: block;
}

#parent.collapsed
{
    display: block;
}

#parent.collapsed div
{
  display: none;
}

セレクターは特異性の順に適用されます。「#parent.collapsed div」は「#parent div」よりも具体的であるため、オーバーライドする必要があります。あとは、親 div のクラスを設定するだけで完了です。JavaScript を使用して、実行時に「折りたたまれた」クラスを DIV に追加/削除し、追加の労力なしで展開を切り替えることができます。

// Mootools:
$('parent').addEvent('click', function()
{
  $('parent').toggleClass('collapsed')
});
于 2009-09-25T19:39:08.927 に答える