javascript www كيف يمكنني تحميل الأكوردي الخاص بي مع إغلاق جميع القوائم؟




www w3schools com html5 (11)

هذا هو ما استخدمه لبلدي الأكورديون. يبدأ مغلق تماما. انت تريد

 active: false;//this does the trick

ممتلئ:

<div id="accordian_div">
    <h1>first</h1>
        <div>
            put something here
        </div>
    <h1>second</h1>
        <div>
            put something here
        </div>
    <h1>third</h1>
        <div>
            put something here
        </div>
</div>

<script type="text/javascript">
     $(document).ready(function() {
        $("#accordian_div").accordion({
            collapsible: true,
            active: false,
            clearStyle: true
        });
      });
</script>

غير مألوفة مع bottstrap ولكن هذا يبدو أنظف قليلاً من جميع الفئات لديك للتعامل مع ويعمل بسلاسة.

أحاول اتباع المثال هنا

http://twitter.github.com/bootstrap/javascript.html#collapse

لقد وضعت نموذجًا بالأحجام الطبيعية هنا

http://jsfiddle.net/gqe7g/

سلوك التحميل غريب. فإنه يُظهر Menu1 ثم تصغير ثم يعرض Menu2 و Menu3. أود كل شيء لفتح انهارت. لقد جربت ما يلي دون نجاح

$('#accordion').collapse({hide: true})

من المستند:

إذا كنت تريد فتحه افتراضيًا ، فأضف الفئة الإضافية فيه.

بعبارة أخرى ، اترك "في" وسيتوقف عن الإغلاق. http://jsfiddle.net/JBRh7/


باستخدام jQuery ، عمل هذا بالنسبة لي مع انهيار جميع الحاويات عند تحميل الصفحة

إضافة {active: false} ويجب أن تكون collapsible ممكنة بالطبع

  $(function () {
      $("#accordion").accordion({ collapsible: true, active: false });
      $(".selector").accordion();
  });

إذا كنت تريد إغلاق جميع تحميل الصفحة المطوية على الصفحة:

في الفصل الدراسي ، يمكنك استبداله collapse الفصل الدراسي.

id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne">

تحديث ل:

id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

<script type="text/javascript">  

    jQuery(document).ready(function ($) {

       $('#collapseOne').collapse("hide");
    });      

</script>

استبدال

$(".collapse").collapse();
$('#accordion').collapse({hide: true})

مع:

$('#collapseOne').collapse("hide");

يجب أن تفعل الخدعة. أعتقد أن المفتاح الأول مثبت بشكل افتراضي ويقوم هذا السطر بإيقاف تشغيله.


يمكنك تمرير خيار toggle: false لبيان الانهيار لجعل كل عناصر الأكورديون مخفية عند التحميل ، مثل:

$('.collapse').collapse({
    toggle: false
});

العرض التوضيحي: http://jsfiddle.net/gqe7g/9/


استخدم طريقة الإخفاء التي يوفرها Bootstrap ،

$('.collapse').collapse('hide')

عرض في http://thefanciful.com . يتم إخفاء معلوماتي عند التحميل ، ويتم تنشيطها عند الضغط على الزر. :)


كنت في عداد المفقودين الطبقة 'في' على divins هيئة الأجسام ل Menu2 و Menu3

يحتاج كل من divs-body-body إلى class="accordion-body collapse in" . في الوقت الحالي ، يوجد اثنان منهم لديهم class="accordion-body collapse"

http://jsfiddle.net/fcJJT/


أعلم أن هذه مناقشة قديمة ، ولكن هناك حلان آخران ناجحان:

1) أضف

فئة من aria-expanded="true" داخل هذا الرابط:

<a data-toggle="collapse" data-parent="#accordion"...></a>

2) في حال كنت تستخدم لوحات (مثل أدناه)

<div id="collapse1" class="panel-collapse out collapse in" style="height: auto;">

سيؤدي تغيير collapse in collapse out القيام بالخدعة أيضًا


ما عليك .panel-collapse إزالة فئة .in من .panel-collapse في "collapseOne". (Bootstrap v3.3.7)







twitter-bootstrap