ייַנבראָך

וויאזוי עס ארבעט

די ייַנבראָך דזשאַוואַסקריפּט פּלוגין איז געניצט צו ווייַזן און באַהאַלטן אינהאַלט. קנעפּלעך אָדער אַנגקערז זענען געניצט ווי טריגערז וואָס זענען מאַפּט צו ספּעציפיש עלעמענטן איר טאַגאַל. קאַלאַפּסינג אַן עלעמענט וועט ופלעבן די heightפון זיין קראַנט ווערט צו 0. געגעבן ווי CSS כאַנדאַלז אַנאַמיישאַנז, איר קענען נישט נוצן paddingאויף אַ .collapseעלעמענט. אַנשטאָט, נוצן די קלאַס ווי אַ פרייַ ראַפּינג עלעמענט.

בייַשפּיל

דריקט אויף די קנעפּלעך אונטן צו ווייַזן און באַהאַלטן אן אנדער עלעמענט דורך קלאַס ענדערונגען:

• .collapseבאַהאַלט אינהאַלט
• .collapsingאיז געווענדט בעשאַס טראַנזישאַנז
• .collapse.showווייזט אינהאַלט

אין אַלגעמיין, מיר רעקאָמענדירן ניצן אַ קנעפּל מיט די data-bs-targetאַטריביוט. כאָטש ניט רעקאַמענדיד פֿון אַ סעמאַנטיק פונט פון מיינונג, איר קענען אויך נוצן אַ לינק מיט די hrefאַטריביוט (און אַ role="button"). אין ביידע קאַסעס, עס data-bs-toggle="collapse"איז פארלאנגט.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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-horizontalמאָדיפיער קלאַס צו יבערגאַנג די widthאַנשטאָט פון heightאון שטעלן אַ widthאויף די באַלדיק קינד עלעמענט. פילן פריי צו שרייַבן דיין אייגענע מנהג סאַס, נוצן ינלינע סטיילז אָדער נוצן אונדזער ברייט יוטילאַטיז .

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

קייפל טאַרגאַץ

א <button>אָדער <a>קענען ווייַזן און באַהאַלטן קייפל עלעמענטן דורך ריפערינג זיי מיט אַ סעלעקטאָר אין זיין hrefאָדער data-bs-targetאַטריביוט. קייפל <button>אָדער <a>קענען ווייַזן און באַהאַלטן אַן עלעמענט אויב זיי יעדער דערמאָנען עס מיט זייער hrefאָדער data-bs-targetאַטריביוט

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

אַקסעסאַביליטי

זייט זיכער צו לייגן aria-expandedצו די קאָנטראָל עלעמענט. דער אַטריביוט בפירוש קאַנווייז די קראַנט שטאַט פון די קאַלאַפּסאַבאַל עלעמענט טייד צו די קאָנטראָל צו פאַרשטעלן לייענער און ענלעך אַסיסטיוו טעקנאַלאַדזשיז. אויב די קאַלאַפּסאַבאַל עלעמענט איז פארמאכט דורך פעליקייַט, די אַטריביוט אויף די קאָנטראָל עלעמענט זאָל האָבן אַ ווערט פון aria-expanded="false". אויב איר האָט באַשטימט די קאַלאַפּסאַבאַל עלעמענט צו זיין אָפן דורך פעליקייַט ניצן די showקלאַס, שטעלן aria-expanded="true"אויף די קאָנטראָל אַנשטאָט. דער פּלוגין וועט אויטאָמאַטיש באַשטימען דעם אַטריביוט אויף די קאָנטראָל באזירט אויף צי די קאַלאַפּסאַבאַל עלעמענט איז געעפנט אָדער פֿאַרמאַכט (דורך דזשאַוואַסקריפּט, אָדער ווייַל דער באַניצער טריגערד אן אנדער קאָנטראָל עלעמענט אויך טייד צו דער זעלביקער קאַלאַפּסאַבאַל עלעמענט). אויב די HTML עלעמענט פון די קאָנטראָל עלעמענט איז נישט אַ קנעפּל (למשל, אַן <a>אָדער <div>), די אַטריביוטrole="button"זאָל זיין מוסיף צו די עלעמענט.

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

באַמערקונג אַז די קראַנט ימפּלאַמענטיישאַן פון Bootstrap טוט נישט דעקן די פאַרשידן אַפּשאַנאַל קלאַוויאַטור ינטעראַקשאַנז דיסקרייבד אין די ARIA Authoring Practices Guide אַקאָרדיאַן מוסטער - איר וועט דאַרפֿן צו אַרייַננעמען די זיך מיט מנהג דזשאַוואַסקריפּט.

סאַס

וועריאַבאַלז

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

קלאסן

ייַנבראָך יבערגאַנג קלאסן קענען זיין געפֿונען אין scss/_transitions.scssווי זיי זענען שערד צווישן קייפל קאַמפּאָונאַנץ (ייַנבראָך און אַקאָרדיאַן).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

באַניץ

די ייַנבראָך פּלוגין ניצט עטלעכע קלאסן צו שעפּן די שווער ליפטינג:

• .collapseבאַהאַלט דעם אינהאַלט
• .collapse.showווייזט די אינהאַלט
• .collapsingאיז מוסיף ווען די יבערגאַנג סטאַרץ, און אַוועקגענומען ווען עס ענדיקן

די קלאסן קענען זיין געפֿונען אין _transitions.scss.

דורך דאַטן אַטריביוץ

נאָר לייגן data-bs-toggle="collapse"און אַ data-bs-targetצו דעם עלעמענט צו אויטאָמאַטיש באַשטימען קאָנטראָל פון איינער אָדער מער קאַלאַפּסאַבאַל עלעמענטן. דער data-bs-targetאַטריביוט אַקסעפּץ אַ CSS סעלעקטאָר צו צולייגן די ייַנבראָך. זייט זיכער צו לייגן די קלאַס collapseצו די קאַלאַפּסאַבאַל עלעמענט. אויב איר ווילט אַז עס זאָל זיין פעליקייַט עפענען, לייגן די נאָך קלאַס show.

צו לייגן אַקאָרדיאַן-ווי גרופּע פאַרוואַלטונג צו אַ קאַלאַפּסאַבאַל געגנט, לייגן די דאַטן אַטריביוט data-bs-parent="#selector". אָפּשיקן צו די אַקאָרדיאַן בלאַט פֿאַר מער אינפֿאָרמאַציע.

דורך דזשאַוואַסקריפּט

געבן מאַניואַלי מיט:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

אָפּציעס

ווי אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, איר קענען לייגן אַן אָפּציע נאָמען צו data-bs-, ווי אין data-bs-animation="{value}". מאַכן זיכער צו טוישן די פאַל טיפּ פון די אָפּציע נאָמען פון " camelCase " צו " קעבאַב פאַל " ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, נוצן data-bs-custom-class="beautifier"אַנשטאָט פון data-bs-customClass="beautifier".

זינט Bootstrap 5.2.0, אַלע קאַמפּאָונאַנץ שטיצן אַן יקספּערמענאַל רעזערווירט דאַטן אַטריביוט data-bs-configוואָס קענען זיין אַ פּשוט קאָמפּאָנענט קאַנפיגיעריישאַן ווי אַ JSON שטריקל. ווען אַן עלעמענט האט data-bs-config='{"delay":0, "title":123}'און data-bs-title="456"אַטריביוץ, די לעצט titleווערט וועט זיין 456און די באַזונדער דאַטן אַטריביוץ וועט אָווועררייד וואַלועס געגעבן אויף data-bs-config. אין אַדישאַן, די יגזיסטינג דאַטן אַטריביוץ זענען ביכולת צו הויז JSON וואַלועס ווי data-bs-delay='{"show":0,"hide":150}'.

מעטהאָדס

אַקטאַווייץ דיין אינהאַלט ווי אַ קאַלאַפּסאַבאַל עלעמענט. אַקסעפּץ אַן אַפּשאַנאַל אָפּציעס object.

איר קענען מאַכן אַ ייַנבראָך בייַשפּיל מיט די קאָנסטרוקטאָר, למשל:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

געשעענישן

Bootstrap ס ייַנבראָך קלאַס יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין ייַנבראָך פאַנגקשאַנאַליטי.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})