Source

הִתמוֹטְטוּת

החלף את הנראות של תוכן בפרויקט שלך עם כמה שיעורים ותוספי JavaScript שלנו.

איך זה עובד

התוסף ל-Clapse JavaScript משמש להצגה והסתרה של תוכן. לחצנים או עוגנים משמשים כטריגרים שממופים לאלמנטים ספציפיים שאתה מחליף. כיווץ של אלמנט יגרום להנפשה 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>or <a>יכול להציג ולהסתיר אלמנטים מרובים על ידי הפניה אליהם עם בורר JQuery בתכונה hrefאו שלו. data-targetריבוי <button>או <a>יכול להציג ולהסתיר אלמנט אם כל אחד מהם מפנה אליו עם התכונה hrefאו שלוdata-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בתור עטיפה.

Anim pariatur קלישאה reprehenderit, enim eiusmod high life accusamus טרי ריצ'רדסון עד דיונון. 3 wolf moon officia aute, non cupidatat סקייטבורד דולו בראנץ'. משאית אוכל קינואה nesciunt laborum eiusmod. בראנץ' 3 זאב ירח טמפור, 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"על הפקד במקום זאת. התוסף יחליף אוטומטית את התכונה הזו בפקד על סמך האם הרכיב הניתן לקריסה נפתח או לא (באמצעות JavaScript, או בגלל שהמשתמש הפעיל אלמנט בקרה אחר שקשור גם הוא לאותו אלמנט מתקפל). אם רכיב ה-HTML של רכיב הבקרה אינו כפתור (למשל, <a>או או <div>), התכונהrole="button"יש להוסיף לאלמנט.

אם רכיב הבקרה שלך מכוון לרכיב בודד שניתן להתכווץ - כלומר data-targetהתכונה מכוונת idלבורר - עליך להוסיף את aria-controlsהתכונה לרכיב הבקרה, המכילה את התכונה של idהרכיב המתכווץ. קוראי מסך מודרניים וטכנולוגיות מסייעות דומות עושים שימוש בתכונה זו כדי לספק למשתמשים קיצורי דרך נוספים כדי לנווט ישירות אל האלמנט הניתן לקריסה עצמו.

שימו לב שהיישום הנוכחי של Bootstrap אינו מכסה את אינטראקציות המקלדת השונות המתוארות בתבנית האקורדיון של WAI-ARIA Authoring Practices 1.1 - תצטרכו לכלול אותן בעצמכם עם JavaScript מותאם אישית.

נוֹהָג

תוסף הקריסה משתמש בכמה מחלקות כדי להתמודד עם ההרמה הכבדה:

  • .collapseמסתיר את התוכן
  • .collapse.showמציג את התוכן
  • .collapsingמתווסף כאשר המעבר מתחיל, ומוסר כאשר הוא מסתיים

ניתן למצוא שיעורים אלה ב _transitions.scss.

באמצעות תכונות נתונים

פשוט הוסף data-toggle="collapse"ו-a data-targetלאלמנט כדי להקצות אוטומטית שליטה על אלמנט אחד או יותר הניתנים לקיפול. התכונה data-targetמקבלת בורר CSS להחיל עליו את הכיווץ. הקפד להוסיף את המחלקה collapseלרכיב הניתן לקיפול. אם תרצה שהיא תיפתח כברירת מחדל, הוסף את המחלקה הנוספת show.

כדי להוסיף ניהול קבוצתי דמוי אקורדיון לאזור מתקפל, הוסף את תכונת הנתונים data-parent="#selector". עיין בהדגמה כדי לראות את זה בפעולה.

דרך JavaScript

הפעל באופן ידני עם:

$('.collapse').collapse()

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-parent="".

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
הוֹרֶה בורר | אובייקט jQuery | רכיב DOM שֶׁקֶר אם הורה מסופק, אז כל הרכיבים הניתנים לכיווץ מתחת להורה שצוין ייסגרו כאשר הפריט הניתן לכיווץ יוצג. (בדומה להתנהגות האקורדיון המסורתית - זה תלוי cardבכיתה). יש להגדיר את התכונה באזור המתקפל של המטרה.
לְמַתֵג בוליאני נָכוֹן מחליפה את הרכיב הניתן לקריסה בעת הפניה

שיטות

שיטות ומעברים אסינכרוניים

כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .

עיין בתיעוד JavaScript שלנו למידע נוסף .

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

הורס את קריסת האלמנט.

אירועים

מחלקת הקריסה של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות התמוטטות.

סוג אירוע תיאור
show.bs.collapse אירוע זה מופעל מיד כאשר showשיטת המופע נקראת.
הצג.bs.התמוטטות אירוע זה מופעל כאשר רכיב כיווץ נעשה גלוי למשתמש (יחכה לסיום מעברי CSS).
hide.bs.collapse אירוע זה מופעל מיד כאשר hideהשיטה נקראה.
hidden.bs.collapse אירוע זה מופעל כאשר אלמנט כיווץ הוסתר מהמשתמש (יחכה לסיום מעברי CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})