javascript - weschool - www w3schools com html5




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

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

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 القيام بالخدعة أيضًا

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

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

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

http://jsfiddle.net/gqe7g/

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

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

إذا كنت ترغب في collapse accordion في البداية ، فيمكنك القيام بذلك باستخدام تعريفات تمهيدية موجودة مسبقًا ، فإن javascript غير ضروري.

إضافة الطبقة إلى المنصة أو المقبض الذي سيكون هدف النقر للمستخدمين toggle مفتوحة / مغلقة. أيضا ، قم بإزالة in الصف من الحاوية المنهارة.

يوفر Bootstrap أيضًا اثنين من المواصفات الاختيارية التي يمكن تمريرها عن طريق إضافة data-parent="" و data-toggle=""

  • يقبل data-parent أحد المحددات ويحدد أنه سيتم تبديل جميع العناصر القابلة للطي التي هي أشقاء لأصل البيانات بشكل متناسق.
  • data-toggle يقبل قيمة منطقية true أو false ويقوم بتعيين الاستدعاء على العنصر القابل للطي.

سيناريوهات المثال:

سوف ينهار التحميل

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                Details

سيتم تحميل الموسعة

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body">
            <div class="accordion-inner">
                Details

سيتم تحميل الموسعة

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Details

في المثال الثالث ، سيتم تعيين الأكورديون للتوسع بغض النظر عن حقيقة أن الفئة collapsed محددة لأن الطبقة في الحاوية ستتلقى وزناً أكبر.

إذا كنت ترغب في تشغيل الأكورديون عبر جافا سكريبت ، فيجب عليك فقط استدعاء collapse() الطريقة collapse() مع محدد الهوية أو محدد الفئة المناسب الذي يستهدف العنصر القابل للطي.

يقبل collapse() أيضًا نفس الخيارات التي يمكن إضافتها إلى الترميز. data-parent وتبادل data-toggle


استبدال

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

مع:

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

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


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

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

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


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


من المستند:

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

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


يتغيرون

class="accordion-body collapse in"

إلى

class="accordion-body collapse"

على الانهيار الخاص بك DIV


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

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

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


<script type="text/javascript">  

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

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

</script>




twitter-bootstrap