הִתמוֹטְטוּת
החלף את הנראות של תוכן בפרויקט שלך עם כמה שיעורים ותוספי JavaScript שלנו.
איך זה עובד
התוסף ל-Clapse JavaScript משמש להצגה והסתרה של תוכן. לחצנים או עוגנים משמשים כטריגרים שממופים לאלמנטים ספציפיים שאתה מחליף. כיווץ של אלמנט יגרום להנפשה height
מהערך הנוכחי שלו ל- 0
. בהתחשב באופן שבו CSS מטפל בהנפשות, אינך יכול להשתמש padding
באלמנט .collapse
. במקום זאת, השתמש במחלקה כרכיב עטיפה עצמאי.
prefers-reduced-motion
בשאילתת המדיה. עיין
בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .
דוגמא
לחץ על הלחצנים למטה כדי להציג ולהסתיר אלמנט נוסף באמצעות שינויים בכיתה:
.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>
אופקי
תוסף הקריסה תומך גם בקריסה אופקית. הוסף את .width
מחלקת השינוי כדי להעביר את width
במקום height
ולהגדיר a width
על אלמנט הבן המיידי. אל תהסס לכתוב Sass מותאם אישית משלך, להשתמש בסגנונות מוטבעים או להשתמש בכלי השירות לרוחב שלנו .
min-height
קבוצה למנוע צביעה חוזרת מוגזמת במסמכים שלנו, זה לא נדרש במפורש.
נדרש רק את הרכיב על הבן.width
<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>
or <a>
יכול להציג ולהסתיר אלמנטים מרובים על ידי הפניה אליהם עם בורר JQuery בתכונה href
או שלו. data-target
ריבוי <button>
או <a>
יכול להציג ולהסתיר אלמנט אם כל אחד מהם מפנה אליו עם התכונה href
או שלוdata-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
בתור עטיפה.
.show
לכיתה.
<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"
על הפקד במקום זאת. התוסף יחליף אוטומטית את התכונה הזו בפקד בהתבסס על פתיחה או סגירה של האלמנט הניתן לקריסה (באמצעות JavaScript, או בגלל שהמשתמש הפעיל אלמנט בקרה אחר שקשור גם הוא לאותו אלמנט מתקפל). אם רכיב ה-HTML של רכיב הבקרה אינו כפתור (למשל, <a>
או או <div>
), התכונהrole="button"
יש להוסיף לאלמנט.
אם רכיב הבקרה שלך מכוון לרכיב אחד שניתן להתכווץ - כלומר data-target
התכונה מכוונת id
לבורר - עליך להוסיף את aria-controls
התכונה לרכיב הבקרה, המכילה את התכונה של id
הרכיב המתכווץ. קוראי מסך מודרניים וטכנולוגיות מסייעות דומות עושים שימוש בתכונה זו כדי לספק למשתמשים קיצורי דרך נוספים כדי לנווט ישירות אל הרכיב הניתן לקריסה עצמו.
שים לב שהיישום הנוכחי של Bootstrap אינו מכסה את אינטראקציות המקלדת השונות המתוארות ב- ARIA Authoring Practices Guide דפוס האקורדיון - תצטרך לכלול את אלה בעצמך עם 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 הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .
.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...
})