Rushewa

Canja hangen nesa na abun ciki a cikin aikinku tare da ƴan azuzuwan da kuma abubuwan mu na JavaScript.

Yadda yake aiki

Ana amfani da rugujewar kayan aikin JavaScript don nunawa da ɓoye abun ciki. Ana amfani da maɓallai ko anka a matsayin masu jawo waɗanda aka tsara zuwa takamaiman abubuwan da kuke juyawa. Rushe wani kashi zai raya heightdaga darajarsa na yanzu zuwa 0. Ganin yadda CSS ke sarrafa rayarwa, ba za ku iya amfani paddingda wani .collapseabu ba. Madadin haka, yi amfani da ajin azaman abin rufewa mai zaman kansa.

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Misali

Danna maɓallan da ke ƙasa don nunawa da ɓoye wani abu ta canje-canjen aji:

.collapseboye abun ciki
.collapsingana amfani dashi a lokacin sauyawa
.collapse.showyana nuna abun ciki

Kuna iya amfani da hanyar haɗi tare da hrefsifa, ko maɓalli tare da data-targetsifa. A cikin duka biyun, data-toggle="collapse"ana buƙatar.

Haɗi tare da 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>

Makasudi da yawa

A <button>ko <a>na iya nunawa da ɓoye abubuwa da yawa ta hanyar misalta su tare da zaɓin JQuery a cikin hrefko data-targetsifa. Maɗaukaki <button>ko <a>suna iya nunawa da ɓoye wani kashi idan kowannensu ya yi nuni da shi da nasu hrefko data-targetsifa

Juya kashi na farko

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>

Misalin Accordion

Amfani da bangaren katin , zaku iya tsawaita halin rugujewar tsoho don ƙirƙirar haɗin gwiwa. Don cimma daidaitaccen salon accordion, tabbatar da amfani .accordionda shi azaman abin rufewa.

Anim pariatur cliche reprehenderit, babban rayuwa wanda ake zargi Terry Richardson da squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Motar abinci quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ya sa tsuntsu a kai squid guda- asali kofi nulla zaton shoreditch et. Nihil anim keffiyeh helvetica, craft beer laborre wes anderson cred nesciunt sapiente ea proident. Ad vegan banda mahauta mataimakin lomo. Leggings occaecat sana'ar giya gona-zuwa tebur, danyen denim aesthetic synth nesciunt mai yiwuwa ba ka ji labarin su accusamus labore VHS mai dorewa.

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>

Dama

Tabbatar ƙara aria-expandedzuwa sashin sarrafawa. Wannan sifa tana bayyana a sarari halin da ake ciki na ɓangaren ruɗewa wanda ke daura da sarrafawa zuwa masu karanta allo da makamantan fasahar taimako. Idan an rufe kashi mai yuwuwa ta tsohuwa, sifa a kan sashin sarrafawa yakamata ya sami darajar aria-expanded="false". Idan kun saita abin da zai iya rushewa don buɗewa ta tsohuwa ta amfani da showajin, saita aria-expanded="true"kan sarrafawa maimakon. Plugin za ta kunna wannan sifa ta atomatik akan sarrafawa bisa ko an buɗe ko a'a abin da zai iya rushewa ko a'a an buɗe ko a'a (ta hanyar JavaScript, ko kuma saboda mai amfani ya haifar da wani ɓangaren sarrafawa shima an ɗaure shi da kashi ɗaya mai yuwuwa). Idan abin sarrafawa na HTML ba maɓalli bane (misali, wani <a>ko <div>), sifarole="button"ya kamata a kara zuwa kashi.

Idan sashin sarrafa ku yana yin niyya ne guda ɗaya mai yuwuwa - watau data-targetsifa tana nuna mai idzaɓi - yakamata ku ƙara aria-controlssifa zuwa sashin sarrafawa, wanda ke ɗauke da idkashi mai yuwuwa. Masu karanta allo na zamani da makamantan fasahar taimako suna amfani da wannan sifa don samarwa masu amfani ƙarin gajerun hanyoyi don kewaya kai tsaye zuwa ɓangaren da zai iya rugujewa kansa.

Lura cewa aiwatar da Bootstrap na yanzu baya rufe nau'ikan mu'amalar maɓalli daban-daban da aka kwatanta a cikin Tsarin Mawallafin Ayyukan 1.1 na WAI-ARIA - kuna buƙatar haɗa waɗannan da kanku tare da JavaScript na al'ada.

Amfani

Fasinjojin rushewa yana amfani da ƴan azuzuwan don ɗaukar nauyi mai nauyi:

.collapseboye abun ciki
.collapse.showyana nuna abun ciki
.collapsingana ƙara lokacin da aka fara canji, kuma a cire idan ya ƙare

Ana iya samun waɗannan azuzuwan a _transitions.scss.

Ta hanyar bayanan halayen

Kawai ƙara data-toggle="collapse"da data-targeta cikin kashi don ba da iko ta atomatik ɗaya ko fiye abubuwan da za su iya rushewa. Siffar data-targettana karɓar mai zaɓin CSS don amfani da rushewar zuwa. Tabbatar ƙara ajin collapsezuwa kashi mai rugujewa. Idan kuna son buɗewa ta tsohuwa, ƙara ƙarin ajin show.

Don ƙara gudanarwar rukuni-kamar accordion zuwa yanki mai yuwuwa, ƙara sifa na bayanai data-parent="#selector". Koma zuwa demo don ganin wannan a aikace.

Ta hanyar JavaScript

Kunna da hannu tare da:

$('.collapse').collapse()

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-parent="".

Suna	Nau'in	Default	Bayani
iyaye	mai za6i \| jQuery abu \| DOM element	karya	Idan an ba da iyaye, to duk abubuwan da za su iya haɗuwa a ƙarƙashin ƙayyadadden iyaye za a rufe su lokacin da aka nuna wannan abu mai yuwuwa. (mai kama da al'adun gargajiya na gargajiya - wannan ya dogara da `card`aji). Dole ne a saita sifa akan wurin da ake iya rugujewa.
juya	boolean	gaskiya	Yana kunna abin da zai iya rushewa akan kira

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

`.collapse(options)`

Yana kunna abun cikin ku azaman abun da zai iya rugujewa. Yana yarda da zaɓin zaɓi object.

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

Yana juya wani abu mai rugujewa zuwa nunawa ko ɓoye. Komawa ga mai kira kafin a nuna abin da zai iya rugujewa a zahiri ko a ɓoye (watau kafin abin shown.bs.collapseko hidden.bs.collapseya faru).

`.collapse('show')`

Yana nuna kashi mai rugujewa. Komawa ga mai kira kafin a nuna ainihin abin da zai iya rushewa (watau kafin shown.bs.collapseabin ya faru).

`.collapse('hide')`

Yana ɓoye wani abu mai rugujewa. Komawa ga mai kira kafin abin da zai iya rushewa ya kasance a ɓoye (watau kafin hidden.bs.collapseabin ya faru).

`.collapse('dispose')`

Yana lalata rugujewar wani abu.

Abubuwan da suka faru

Ajin rushewar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan rugujewa.

Nau'in Taron	Bayani
nuna.bs.rushewa	Wannan taron yana gobara nan da nan lokacin da `show`aka kira hanyar misali.
an nuna.bs.rushewa	Ana korar wannan taron lokacin da aka bayyana ɓangaren rugujewa ga mai amfani (zai jira canjin CSS ya kammala).
boye.bs.rushe	Ana korar wannan taron nan da nan lokacin da `hide`aka kira hanyar.
boye.bs.rushewa	Ana kora wannan taron lokacin da aka ɓoye ɓoyayyiyar ɓarna daga mai amfani (zai jira canjin CSS ya kammala).

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