同じ親要素内の複数の隣接divを拡大し、崩壊

Question

私はこのコードのビットに苦しんでいる、と私はそれも可能だかはわかりません。私は、単一の親要素内の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が表示されます。その特定の.always_show divの下にONLY折りたたまれたdivを拡大して表示し、常ににリンクがあります。私は、折りたたみ式のdivが自分のdivにあった場合は、このは10万回容易になるだろうけど、私は、コードを制御できません。私はjqueryのを使用しているとして、それを動作させる必要があります。可能？

Answer 1

$('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; 
    }
});

もちろん、あなたは私の最初のセレクタ'div.always_show'を使用するのではなく、それをクリックしたリンクの親である実際の要素を、供給してはなりません。たとえばます：

$('#expand_anchor').parent().parent().nextAll()...

Answer 2

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);

Answer 3

あなたは、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のクラスを設定して、すれば完了です。追加/任意の追加的な努力なしで拡張を切り替えるには、実行時にDIVに「崩壊」クラスを削除するにはJavaScriptを使用することができます：

// Mootools:
$('parent').addEvent('click', function()
{
  $('parent').toggleClass('collapsed')
});