Нурах

Цөөн хэдэн анги болон манай JavaScript залгаасуудын тусламжтайгаар төслийнхөө контентын харагдах байдлыг асаана уу.

Хэрхэн ажилладаг

Буулгах JavaScript залгаасыг контентыг харуулах, нуухад ашигладаг. Товчлуур эсвэл зангуу нь таны сэлгэх тодорхой элементүүдтэй зурагдсан гох болгон ашигладаг. Элементийг хумивал тухайн элементийг heightодоогийн утгаас нь анивчуулна 0. CSS нь хөдөлгөөнт дүрсийг хэрхэн зохицуулдгийг харгалзан элемент paddingдээр ашиглах боломжгүй. .collapseХарин оронд нь ангиудыг бие даасан боодлын элемент болгон ашигла.

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Жишээ

Ангийн өөрчлөлтөөр өөр элементийг харуулах, нуухын тулд доорх товчлууруудыг дарна уу:

.collapseагуулгыг нуудаг
.collapsingшилжилтийн үед хэрэглэнэ
.collapse.showагуулгыг харуулдаг

Та атрибут бүхий холбоос hrefэсвэл атрибут бүхий товчлуурыг ашиглаж болно data-target. Аль ч тохиолдолд data-toggle="collapse"шаардлагатай.

href-тэй холбох

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>эсвэл <a>олон элементийг JQuery сонгогчоор hrefэсвэл data-targetатрибутаар нь эш татсанаар харуулж, нууж болно. Элемент тус бүр өөрийн эсвэл атрибутаар нь иш татсан тохиолдолд олон <button>буюу <a>харуулах, нуух боломжтойhrefdata-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.

<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 cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 чоно сар officia aute, бус cupidatat skateboard dolor brunch. Хүнсний машин quinoa nesciunt laborum eiusmod. Brunch 3 чоно сарны tempor, sunt aliqua дээр нь шувуу тавьж далайн амьтан нэг гаралтай кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur яргачин дэд lomo. Leggings occaecat гар урлалын шар айрагны фермээс ширээнд хүртэл, түүхий жинсэн гоо зүйн синтетик синтетик nesciunt нь тэдний 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.

<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-ийн уналтын анги нь уналтын функцэд холбогдох хэд хэдэн үйл явдлыг илрүүлдэг.

Үйл явдлын төрөл	Тодорхойлолт
харуулах.bs. нурах	`show`Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
харуулсан.bs.нууралт	Уналтын элементийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
нуух.б. нурах	`hide`Арга дуудагдсан үед энэ үйл явдал шууд идэвхждэг .
нуугдмал.б.нууралт	Уналтын элементийг хэрэглэгчээс нуусан үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).

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

Нурах

Хэрхэн ажилладаг

Жишээ

Олон зорилт

Баян хуурын жишээ

Эвхэгддэг бүлгийн зүйл №1

Эвхэгддэг бүлгийн зүйл №2

Эвхэгддэг бүлгийн зүйл №3