Source

سقوط - فروپاشی

با چند کلاس و افزونه‌های جاوا اسکریپت، قابلیت مشاهده محتوا را در پروژه خود تغییر دهید.

چگونه کار می کند

پلاگین جاوا اسکریپت جمع شده برای نمایش و پنهان کردن محتوا استفاده می شود. دکمه‌ها یا لنگرها به‌عنوان محرک‌هایی استفاده می‌شوند که به عناصر خاصی که شما تغییر می‌دهید، نگاشت می‌شوند. جمع کردن یک عنصر باعث متحرک سازی آن heightاز مقدار فعلی آن به 0. با توجه به اینکه CSS چگونه انیمیشن ها را مدیریت می کند، نمی توانید paddingروی یک .collapseعنصر استفاده کنید. در عوض، از کلاس به عنوان یک عنصر بسته بندی مستقل استفاده کنید.

prefers-reduced-motionاثر انیمیشن این مؤلفه به پرسش رسانه بستگی دارد . بخش حرکت کاهش یافته اسناد دسترسی ما را ببینید.

مثال

برای نمایش و پنهان کردن عنصر دیگری از طریق تغییرات کلاس، روی دکمه‌های زیر کلیک کنید:

  • .collapseمحتوا را پنهان می کند
  • .collapsingدر طول انتقال اعمال می شود
  • .collapse.showمحتوا را نشان می دهد

می توانید از یک پیوند با hrefویژگی یا یک دکمه با data-targetویژگی استفاده کنید. در هر دو مورد، data-toggle="collapse"لازم است.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

اهداف متعدد

A <button>یا <a>می تواند چندین عنصر را با ارجاع به آنها با انتخابگر JQuery در ویژگی hrefیا data-targetویژگی خود نشان داده و پنهان کند. در صورتی که هر کدام یک عنصر را با ویژگی یا ویژگی خود ارجاع دهند، می توانند چند <button>یا نشان دهند و پنهان کنند<a>hrefdata-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

نمونه آکاردئون

با استفاده از مولفه کارت ، می‌توانید رفتار فرو ریختن پیش‌فرض را برای ایجاد آکاردئون گسترش دهید. برای رسیدن به سبک آکاردئونی، حتما از آن .accordionبه عنوان لفاف استفاده کنید.

انیمیشن پاریاتور کلیشه ای reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. کامیون مواد غذایی کینوا nesciunt laborum eiusmod. برانچ 3 wolf moon tempor, sunt aliqua یک پرنده را روی آن قرار داد ماهی مرکب قهوه تک اصل nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. تبلیغ وگان استثنائور قصاب معاون لومو. شلوار ساق occaecat آبجو دستی مزرعه به میز، جین خام زیبایی شناسی مصنوعی، شما احتمالاً در مورد آنها accusamus labore VHS پایدار نشنیده اید.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

دسترسی

حتما به aria-expandedعنصر کنترل اضافه کنید. این ویژگی به صراحت وضعیت فعلی عنصر جمع شونده متصل به کنترل صفحه خوان و فناوری های کمکی مشابه را نشان می دهد. اگر عنصر جمع شونده به طور پیش‌فرض بسته باشد، ویژگی روی عنصر کنترل باید مقداری برابر با aria-expanded="false". اگر عنصر جمع شونده را به‌طور پیش‌فرض با استفاده از showکلاس باز کرده‌اید، aria-expanded="true"در عوض روی کنترل تنظیم کنید. افزونه بر اساس باز یا بسته شدن عنصر جمع شونده (از طریق جاوا اسکریپت یا به این دلیل که کاربر عنصر کنترل دیگری را که به همان عنصر جمع شونده گره خورده است راه اندازی کرده است) به طور خودکار این ویژگی را روی کنترل تغییر می دهد. اگر عنصر HTML عنصر کنترل یک دکمه نباشد (به عنوان مثال، an <a>یا <div>)، ویژگیrole="button"باید به عنصر اضافه شود.

اگر عنصر کنترلی شما یک عنصر جمع شونده منفرد را هدف قرار می دهد - یعنی data-targetمشخصه به یک idانتخابگر اشاره می کند - باید aria-controlsویژگی را به عنصر کنترل اضافه کنید که حاوی idعنصر جمع شونده است. صفحه‌خوان‌های مدرن و فناوری‌های کمکی مشابه از این ویژگی استفاده می‌کنند تا میانبرهای اضافی را برای کاربران فراهم کنند تا مستقیماً به خود عنصر جمع شونده حرکت کنند.

توجه داشته باشید که اجرای فعلی Bootstrap تعاملات مختلف صفحه کلید توصیف شده در الگوی آکاردئونی WAI-ARIA Authoring Practices 1.1 را پوشش نمی دهد - شما باید خودتان این موارد را با جاوا اسکریپت سفارشی اضافه کنید.

استفاده

افزونه collapse از چند کلاس برای انجام کارهای سنگین استفاده می کند:

  • .collapseمحتوا را پنهان می کند
  • .collapse.showمحتوا را نشان می دهد
  • .collapsingهنگامی که انتقال شروع می شود اضافه می شود و پس از پایان آن حذف می شود

این کلاس ها را می توان در _transitions.scss.

از طریق ویژگی های داده

کافیست data-toggle="collapse"یک و a data-targetرا به عنصر اضافه کنید تا کنترل یک یا چند عنصر جمع شونده را به طور خودکار اختصاص دهید. این data-targetویژگی یک انتخابگر CSS را می پذیرد تا جمع کردن را به آن اعمال کند. حتماً کلاس collapseرا به عنصر جمع شونده اضافه کنید. اگر می‌خواهید به‌طور پیش‌فرض باز شود، کلاس اضافی را اضافه کنید show.

برای افزودن مدیریت گروه آکاردئونی مانند به یک ناحیه جمع شونده، ویژگی داده را اضافه کنید data-parent="#selector". برای مشاهده عملکرد به نسخه ی نمایشی مراجعه کنید.

از طریق جاوا اسکریپت

فعال کردن دستی با:

$('.collapse').collapse()

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-parent="".

نام تایپ کنید پیش فرض شرح
والدین انتخابگر | شی jQuery | عنصر DOM نادرست اگر والد ارائه شده باشد، پس از نمایش این مورد تاشو، همه عناصر جمع شونده در زیر والد مشخص شده بسته خواهند شد. (مشابه رفتار آکاردئونی سنتی - این بستگی به cardکلاس دارد). مشخصه باید روی ناحیه جمع شونده هدف تنظیم شود.
تغییر وضعیت بولی درست است، واقعی عنصر جمع شونده را هنگام فراخوانی تغییر می دهد

مواد و روش ها

روش ها و انتقال های ناهمزمان

همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .

برای اطلاعات بیشتر به مستندات جاوا اسکریپت ما مراجعه کنید .

.collapse(options)

محتوای شما را به عنوان یک عنصر جمع شونده فعال می کند. یک گزینه اختیاری را می پذیرد object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

یک عنصر جمع شونده را به نمایش یا پنهان تغییر می دهد. قبل از اینکه عنصر جمع شونده واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد shown.bs.collapseیا hidden.bs.collapseرویداد) به تماس گیرنده برمی گردد.

.collapse('show')

یک عنصر جمع شونده را نشان می دهد. قبل از اینکه عنصر جمع شونده واقعاً نشان داده شود (یعنی قبل از shown.bs.collapseوقوع رویداد) به تماس گیرنده برمی گردد.

.collapse('hide')

یک عنصر جمع شونده را پنهان می کند. قبل از اینکه عنصر جمع شونده واقعاً پنهان شود (یعنی قبل از hidden.bs.collapseوقوع رویداد) به تماس گیرنده برمی گردد.

.collapse('dispose')

فروپاشی یک عنصر را از بین می برد.

مناسبت ها

کلاس فروپاشی بوت استرپ، چند رویداد را برای اتصال به عملکرد جمع شدن در معرض نمایش می گذارد.

نوع رویداد شرح
نشان دادن.ب.سقوط این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده.ب.ب.افتادن این رویداد زمانی فعال می‌شود که یک عنصر جمع‌شده برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال‌های CSS می‌ماند).
hide.bs.collapse این رویداد بلافاصله پس از hideفراخوانی متد اجرا می شود.
hidden.bs.collapse این رویداد زمانی فعال می‌شود که یک عنصر جمع‌شده از کاربر پنهان شده باشد (منتظر تکمیل انتقال‌های CSS می‌ماند).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})