توسيع وانهيار السحب المجاورة متعددة داخل العنصر الأصلي

Question

أنا تكافح مع هذا القليل من التعليمات البرمجية، وأنا لست متأكدا مما إذا كان ذلك ممكنا. لدي قائمة Divs داخل عنصر أحد الوالدين، وأنا بحاجة إلى الانهيار وتوسيع مجموعات معينة. إليك مثال:

<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 العرض: لا شيء. سيكون هناك رابط في عرض دائما لتوسيع فقط Divs المنهار أدناه هذا معين. أعلم أن هذا سيكون من الأسهل عشرة ملايين مرة إذا كانت divs القابلة للطي في Div الخاصة بهم، لكنني لا أملك السيطرة على التعليمات البرمجية. لا بد لي من جعله يعمل كما هو الحال باستخدام 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;
}

يتم تطبيق محددات من أجل الخصوصية. منذ "# Palent.Clapsed DIV" هو أكثر تحديدا من "DIV الشفاف"، يجب أن يتجاوز. الآن، كل ما عليك فعله، يقوم بتعيين فئة DIV الأصلية، وأنت انتهيت. يمكنك استخدام JavaScript لإضافة / إزالة الفئة "المنهار" إلى DIV في وقت التشغيل لتسجيل التوسع دون أي جهد إضافي:

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