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

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

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

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

مثال

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

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

به طور کلی، توصیه می کنیم از یک دکمه با data-targetویژگی استفاده کنید. اگرچه از نظر معنایی توصیه نمی شود، اما می توانید از پیوندی با hrefویژگی (و a role="button") نیز استفاده کنید. در هر دو مورد، data-toggle="collapse"لازم است.

<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

افقی

افزونه collapse از جمع شدن افقی نیز پشتیبانی می کند. .widthکلاس اصلاح کننده را برای انتقال به widthجای اضافه کنید heightو a widthرا روی عنصر فرزند فوری تنظیم کنید. راحت باشید Sass سفارشی خود را بنویسید، از سبک های درون خطی استفاده کنید یا از ابزارهای عرض ما استفاده کنید .

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

اهداف متعدد

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

<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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

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

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

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" 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">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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عنصر جمع شونده است. صفحه‌خوان‌های مدرن و فناوری‌های کمکی مشابه از این ویژگی استفاده می‌کنند تا میانبرهای اضافی را برای کاربران فراهم کنند تا مستقیماً به خود عنصر جمع شونده حرکت کنند.

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

استفاده

افزونه 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="".

مواد و روش ها

.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')

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

مناسبت ها

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})