ייַנבראָך
באַשטימען די וויזאַביליטי פון אינהאַלט אין דיין פּרויעקט מיט עטלעכע קלאסן און אונדזער דזשאַוואַסקריפּט פּלוגינס.
דריקט אויף די קנעפּלעך אונטן צו ווייַזן און באַהאַלטן אן אנדער עלעמענט דורך קלאַס ענדערונגען:
.collapse
באַהאַלט אינהאַלט.collapsing
איז געווענדט בעשאַס טראַנזישאַנז.collapse.show
ווייזט אינהאַלט
איר קענען נוצן אַ לינק מיט די href
אַטריביוט, אָדער אַ קנעפּל מיט די data-target
אַטריביוט. אין ביידע קאַסעס, עס 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">
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>
א <button>
אָדער <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">
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>
ניצן די קאָרט קאָמפּאָנענט, איר קענען פאַרברייטערן די פעליקייַט ייַנבראָך נאַטור צו שאַפֿן אַ אַקאָרדיאַן.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<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">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<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">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<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 עלעמענט פון די קאָנטראָל עלעמענט איז נישט אַ קנעפּל (למשל, אַן <a>
אָדער <div>
), די אַטריביוטrole="button"
זאָל זיין מוסיף צו די עלעמענט.
אויב דיין קאָנטראָל עלעמענט איז טאַרגאַטינג אַ איין קאַלאַפּסאַבאַל עלעמענט - ד"ה די data-target
אַטריביוט איז ווייזן צו אַ id
סעלעקטאָר - איר זאָל לייגן דעם aria-controls
אַטריביוט צו די קאָנטראָל עלעמענט, מיט id
די קאַלאַפּסאַבאַל עלעמענט. מאָדערן סקרין לייענער און ענלעך אַסיסטאַנץ טעקנאַלאַדזשיז נוצן דעם אַטריביוט צו צושטעלן יוזערז נאָך דורכוועג צו נאַוויגירן גלייך צו די קאַלאַפּסאַבאַל עלעמענט זיך.
באַמערקונג אַז די קראַנט ימפּלאַמענטיישאַן פון Bootstrap טוט נישט דעקן די פאַרשידן קלאַוויאַטור ינטעראַקשאַנז דיסקרייבד אין די WAI-ARIA Authoring Practices 1.1 אַקאָרדיאַן מוסטער - איר וועט דאַרפֿן צו אַרייַננעמען די זיך מיט מנהג דזשאַוואַסקריפּט.
די ייַנבראָך פּלוגין ניצט עטלעכע קלאסן צו שעפּן די שווער ליפטינג:
.collapse
באַהאַלט דעם אינהאַלט.collapse.show
ווייזט די אינהאַלט.collapsing
איז מוסיף ווען די יבערגאַנג סטאַרץ, און אַוועקגענומען ווען עס ענדיקן
די קלאסן קענען זיין געפֿונען אין _transitions.scss
.
נאָר לייגן data-toggle="collapse"
און אַ data-target
צו דעם עלעמענט צו אויטאָמאַטיש באַשטימען קאָנטראָל פון איינער אָדער מער קאַלאַפּסאַבאַל עלעמענטן. דער data-target
אַטריביוט אַקסעפּץ אַ CSS סעלעקטאָר צו צולייגן די ייַנבראָך. זייט זיכער צו לייגן די קלאַס collapse
צו די קאַלאַפּסאַבאַל עלעמענט. אויב איר ווילט אַז עס זאָל זיין פעליקייַט עפענען, לייגן די נאָך קלאַס show
.
צו לייגן אַקאָרדיאַן-ווי גרופּע פאַרוואַלטונג צו אַ קאַלאַפּסאַבאַל געגנט, לייגן די דאַטן אַטריביוט data-parent="#selector"
. אָפּשיקן צו די דעמאָ צו זען דעם אין קאַמף.
געבן מאַניואַלי מיט:
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-parent=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
פאָטער | סעלעקטאָר | דזשקווערי כייפעץ | DOM עלעמענט | פאַלש | אויב דער פאָטער איז צוגעשטעלט, אַלע קאַלאַפּסאַבאַל עלעמענטן אונטער די ספּעסיפיעד פאָטער וועט זיין פארמאכט ווען דעם קאַלאַפּסאַבאַל נומער איז געוויזן. (ענלעך צו טראדיציאנעלן אַקאָרדיאַן נאַטור - דאָס איז אָפענגיק אויף די card קלאַס). די אַטריביוט זאָל זיין באַשטימט אויף דער ציל קאַלאַפּסאַבאַל געגנט. |
טאַגאַל | בוליאַן | אמת | טאָגלעס די קאַלאַפּסאַבאַל עלעמענט אויף ינוואָקאַטיאָן |
אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז
אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .
זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע.
אַקטאַווייץ דיין אינהאַלט ווי אַ קאַלאַפּסאַבאַל עלעמענט. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object
.
טאָגלעס אַ קאַלאַפּסאַבאַל עלעמענט צו געוויזן אָדער פאַרבאָרגן. קערט צו די קאַללער איידער די קאַלאַפּסאַבאַל עלעמענט איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.collapse
אָדער hidden.bs.collapse
געשעעניש אַקערז).
ווייזט אַ קאַלאַפּסאַבאַל עלעמענט. קערט צו די קאַללער איידער די קאַלאַפּסאַבאַל עלעמענט איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.collapse
געשעעניש אַקערז).
כיידז אַ קאַלאַפּסאַבאַל עלעמענט. קערט צו די קאַללער איידער די קאַלאַפּסאַבאַל עלעמענט איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די hidden.bs.collapse
געשעעניש אַקערז).
דיסטרויז אַן עלעמענט ס ייַנבראָך.
Bootstrap ס ייַנבראָך קלאַס יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין ייַנבראָך פאַנגקשאַנאַליטי.
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.collapse | דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.ייַנבראָך | דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז געווען קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
hide.bs.collapse | דעם געשעעניש איז פייערד מיד ווען דער hide אופֿן איז גערופן. |
פאַרבאָרגן.בס.ייַנבראָך | דער געשעעניש איז פייערד ווען אַ ייַנבראָך עלעמענט איז פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |