Rushewa

Canja hangen nesa na abun ciki a cikin aikinku tare da ƴan azuzuwan da plugins ɗin 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.

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

Gabaɗaya, muna ba da shawarar amfani da maɓalli tare da data-targetsifa. Duk da yake ba a ba da shawarar ta hanyar mahangar ilimin tauhidi ba, kuna iya amfani da hanyar haɗi tare da hrefsifa (da kuma a role="button"). A cikin duka biyun, data-toggle="collapse"ana buƙatar.

<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>

A kwance

Fasinjojin rushewa kuma yana goyan bayan rushewar a kwance. Ƙara .widthajin gyare-gyare don canja wurin widthmaimakon heightkuma saita a widthkan abin da ke nan kusa. Jin kyauta don rubuta Sass na al'ada, amfani da salon layi, ko amfani da kayan aikin mu mai faɗi .

<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>

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. Yawa <button>ko <a>suna iya nunawa da ɓoye wani kashi idan kowannensu ya yi nuni da shi tare da sifa hrefko data-targetsifa

<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>

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.

<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>

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 ma'amalar maɓalli daban-daban da aka kwatanta a cikin tsarin ARIA Jagorar Ayyukan Marubuta - 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 rugujewa, ƙ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="".

Hanyoyin

.collapse(options)

Yana kunna abun cikin ku azaman abin 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.

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