Ukwehla

Guqula umxholo wokwaleka ukuze ubonise uluhlu lwamakhonkco kunye nokunye kunye ne-Bootstrap yokuhla iplagi.

Isishwankathelo

Ukwehla kuyatshintsheka, ukwaleka ngokomxholo wokubonisa uluhlu lwamakhonkco kunye nokunye. Zenziwe ukuba zisebenze kunye ne-Bootstrap yokuhla iplagi yeJavaScript. Ziguqulwa ngokucofa, hayi ngokushukuma; esi sisigqibo soyilo ngabom.

Iidrophu zakhiwe kwithala leencwadi lesithathu, iPopper.js , ebonelela ngokuma okuguquguqukayo kunye nokubonwa kwendawo yokujonga. Qinisekisa ukuquka i -popper.min.js phambi kweJavaScript yeBootstrap okanye usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequlethe iPopper.js. I-Popper.js ayisetyenziswanga ukubeka ukwehla kwii-navbar nangona kungafuneki indawo eguqukayo.

Ukuba wakha iJavaScript yethu kwimvelaphi, kufunautil.js .

Ukufikeleleka

Umgangatho we WAI ARIA uchaza role="menu"iwijethi yokwenyani , kodwa oku kukodwa kwisicelo-njengemenu ezixhokonxa iintshukumo okanye imisebenzi. Iimenyu zeARIA zinokuqulatha kuphela izinto zemenyu, izinto zemenyu yebhokisi yokukhangela, izinto zemenyu yeqhosha lerediyo, amaqela amaqhosha erediyo, kunye neemenyu ezisezantsi.

I-Bootstrap's dropdowns, kwelinye icala, yenzelwe ukuba ibe yegeneric kwaye isebenze kwiimeko ezahlukeneyo kunye nezakhiwo zokuphawula. Umzekelo, kuyenzeka ukuba wenze izinto eziwa phantsi eziqulathe amagalelo awongezelelweyo kunye nolawulo lwefom, njengemimandla yokukhangela okanye iifom zokungena. Ngesi sizathu, iBootstrap ayilindelanga (okanye yongeze ngokuzenzekelayo) nayiphi na rolekunye aria-neempawu ezifunekayo kwiimenyu zokwenyani zeARIA . Ababhali kuya kufuneka babandakanye ezi mpawu zithe ngqo ngokwabo.

Nangona kunjalo, i-Bootstrap iyongeza inkxaso eyakhelwe-ngaphakathi kunxibelelwano lwemenyu yebhodi yezitshixo eqhelekileyo, njengokukwazi ukuhamba .dropdown-itemkwizinto ezizimeleyo usebenzisa izitshixo zekhesa kwaye uvale imenyu ESCngesitshixo.

Imizekelo

Gqibezela itoggle yokwehla (iqhosha lakho okanye ikhonkco) kunye nemenyu eyehlayo ngaphakathi .dropdown, okanye enye into ebhengeza position: relative;. Ukwehla kunokuvuswa ukusuka <a>okanye <button>izinto ukuze zilungele iimfuno zakho ezinokubakho.

Iqhosha elinye

Nayiphi na enye .btningajikwa ibe yidropdown toggle nolunye utshintsho lophawulo. Nantsi indlela onokuthi uzisebenzise ngayo naziphi na <button>izinto:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Kwaye kunye <a>nezinto:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Elona candelo lilungileyo ungakwenza oku ngalo naluphi na uhlobo lweqhosha, nalo:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Yahlula iqhosha

Ngokukwanjalo, yenza iqhosha elicandiweyo elehlayo elinophawu olufanayo njengokwehla kweqhosha elinye, kodwa ngokongezwa .dropdown-toggle-splitkwesithuba esifanelekileyo esijikeleze ukhathalelo lokuhla.

Sisebenzisa olu didi longeziweyo ukunciphisa okuthe tyaba paddingmacala omabini ekhathalelo ngama-25% kwaye sisuse margin-leftoko kongezwe kumaqhosha asezantsi. Olo tshintsho olongezelelweyo lugcina i-caret igxile kwiqhosha lokwahlula kwaye unikeze indawo yokubetha ngokufanelekileyo ngokufanelekileyo ecaleni kweqhosha eliphambili.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Ubungakanani

Amaqhosha okwehlayo asebenza ngamaqhosha abo bonke ubukhulu, kubandakanywa ukungagqibekanga kunye namaqhosha okulahla.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Izalathiso

Ukulahla

Qalisa imenyu eyehlayo ngentla kweziqalelo ngokongeza .dropupkwinto engumzali.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

I-Dropright

Qalisa imenyu eyehlayo ekunene kwezinto ngokongeza .droprightkwinto engumzali.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

I-Dropleft

Qalisa imenyu eyehlayo ekhohlo kwizinto ngokongeza .dropleftkwinto engumzali.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Ngokwembali imixholo yemenyu eyehlayo bekufuneka ibe ngamakhonkco, kodwa ayisenjalo nge-v4. Ngoku ungakhetha ukusebenzisa <button>izinto kokwehla kwakho endaweni ye- <a>s nje.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Unako kwakhona ukwenza izinto zokuhla ezingasebenziyo nge .dropdown-item-text. Zive ukhululekile ukwenza isitayile ngakumbi ngeCSS yesiko okanye izinto ezisetyenzisiweyo zokubhaliweyo.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Iyasebenza

Yongeza .activekwizinto ezikuluhlu olusezantsi ukuze zizitayile njengezisebenzayo .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Kukhubazekile

Yongeza .disabledkwizinto ezikuluhlu olusezantsi ukuze uzibhale njengezicinyiweyo .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Ngokungagqibekanga, imenyu eyehlayo ibekwa ngokuzenzekelayo nge-100% ukusuka phezulu kunye necala lasekhohlo lomzali wayo. Yongeza .dropdown-menu-rightku-a .dropdown-menuukuya ekunene lungelelanisa imenyu eyehlayo.

Iintloko phezulu! Iidrophu phantsi zibekwe enkosi kwi-Popper.js (ngaphandle kokuba ziqulethwe kwi-navbar).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Iiheader

Yongeza iheader ukulebhelisha amacandelo ezenzo kuyo nayiphi na imenyu eyehlayo.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Abahluli

Yahlula amaqela ezinto zemenyu ezinxulumeneyo kunye nesahluli.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Isicatshulwa

Beka nasiphi na isicatshulwa esikhululekileyo kwimenyu eyehlayo ngokubhaliweyo kwaye usebenzise izithuba eziluncedo . Qaphela ukuba uya kufuna izimbo zokulinganisa ezongezelelweyo ukunyanzela ububanzi bemenyu.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Iifom

Faka ifom ngaphakathi kwemenyu eyehlayo, okanye uyenze ibe yimenyu eyehlayo, kwaye usebenzise i -margin okanye i-padding eziluncedo ukuyinika indawo engalunganga oyifunayo.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Sebenzisa data-offsetokanye data-referenceutshintshe indawo yokwehla.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Ukusetyenziswa

Ngeempawu zedatha okanye iJavaScript, iplagin eyehlayo iguqula umxholo ofihliweyo (imenyu eyehlayo) ngokuguqula .showiklasi kwizinto zoluhlu lwabazali. Uphawu data-toggle="dropdown"loyelelwano kuthenjelwe kulo ukuvala imenyu eyehlayo kwinqanaba lesicelo, ngoko luluvo oluhle ukusoloko uyisebenzisa.

Kwizixhobo ezisebenza ngokuchukumisa, ukuvula i dropdown yongeza engenanto ( $.noop) mouseoverabaphathi kubantwana <body>abasondeleyo bento. Oku kuvunyiweyo ukuba kubi kwe-Hack kuyafuneka ukusebenza malunga ne- quirk kwi-iOS' abathunywa besiganeko , ebenokuthi ngenye indlela ithintele itephu naphi na ngaphandle kokwehla ekuqaliseni ikhowudi evala ukuhla. Nje ukuba idropdown ivaliwe, ezi zibambi zongezelelweyo ezingenanto mouseoverziyasuswa.

Ngeempawu zedatha

Yongeza data-toggle="dropdown"kwikhonkco okanye iqhosha ukuguqula ukwehla.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

NgeJavaScript

Fowunela ukwehla ngeJavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`isafuneka

Nokuba ufowunela ukwehla kwakho ngeJavaScript okanye endaweni yoko usebenzise i-data-api, data-toggle="dropdown"isoloko ifuneka ukuba ubekhona kwindawo yokuqalisa ukwehla.

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset="".

Igama	Uhlobo	Ukuhlala kukho	Inkcazo
i-offset	inombolo \| umtya \| umsebenzi	0	I-offset yokuhla xa ithelekiswa nethagethi yayo. Ngolwazi oluthe kratya jonga kwi-Popper.js's offset docs .
flip	boolean	yinyani	Vumela i-Dropdown ukuba ijike xa kukho ukugqithelana kwindawo yereferensi. Ngolwazi oluthe vetshe jonga kuPopper.js's flip docs .
umda	umtya \| isiqalelo	'skrolaMzali'	Umda wothintelo lokuphuphumayo kwimenyu eyehlayo. Yamkela amaxabiso e- `'viewport'`, `'window'`, `'scrollParent'`, okanye i-HTMLElement ireferensi (iJavaScript kuphela). Ngolwazi oluthe vetshe bhekisa kuPopper.js's preventOverflow docs .
isalathiso	umtya \| isiqalelo	'guqula'	Isalathiso sesiqalelo semenyu eyehlayo. Yamkela amaxabiso e- `'toggle'`, `'parent'`, okanye i-HTMLElement ireferensi. Ngolwazi oluthe vetshe bhekisa kuPopper.js's referenceObject docs .
umboniso	umtya	'dynamic'	Ngokungagqibekanga, sisebenzisa iPopper.js kwindawo eguqukayo. Khubaza oku nge `static`.

Qaphela xa boundaryimiselwe kulo naliphi na ixabiso ngaphandle 'scrollParent', isimbo position: staticsisetyenziswa .dropdownkwisikhongozeli.

Iindlela

Indlela	Inkcazo
`$().dropdown('toggle')`	Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
`$().dropdown('update')`	Ihlaziya indawo yokwehla kwento.
`$().dropdown('dispose')`	Itshabalalisa into eyehlayo.

Iziganeko

Zonke iziganeko ezihlayo ziyagxothwa .dropdown-menukumzali kwaye relatedTargetzinepropati, exabiso layo lisisiqalelo seankile eshukumayo. hide.bs.dropdownkunye hidden.bs.dropdownneziganeko clickEventzinepropati (kuphela xa uhlobo lwesiganeko sokuqala click) equlathe iNjongo yeSigaba somnyadala wonqakrazo.

Isiganeko	Inkcazo
`show.bs.dropdown`	Esi siganeko sivutha ngokukhawuleza xa indlela yokubonisa umboniso ibizwa.
`shown.bs.dropdown`	Esi siganeko sigxothwa xa ukwehla kwenziwe kwabonakala kumsebenzisi (uya kulinda iinguqu zeCSS, ukugqiba).
`hide.bs.dropdown`	Esi siganeko sigxothwa ngokukhawuleza xa indlela yokufihla umzekelo ibizwe.
`hidden.bs.dropdown`	Esi siganeko sigxothwa xa ukwehla kugqityiwe ukufihlwa kumsebenzisi (iya kulinda iinguqulelo zeCSS, ukuba zigqitywe).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Ukwehla

Isishwankathelo

Ukufikeleleka

Imizekelo

Iqhosha elinye

Yahlula iqhosha

Ubungakanani

Izalathiso

Ukulahla

I-Dropright

I-Dropleft

Izinto zemenyu

Iyasebenza

Kukhubazekile

Ulungelelwaniso lwemenyu

Umxholo wemenyu

Iiheader

Abahluli

Isicatshulwa

Iifom

Ukusetyenziswa

Ngeempawu zedatha

NgeJavaScript

`data-toggle="dropdown"`isafuneka

Iinketho

Iindlela

Iziganeko

Ukwehla

Isishwankathelo

Ukufikeleleka

Imizekelo

Iqhosha elinye

Yahlula iqhosha

Ubungakanani

Izalathiso

Ukulahla

I-Dropright

I-Dropleft

Izinto zemenyu

Iyasebenza

Kukhubazekile

Ulungelelwaniso lwemenyu

Umxholo wemenyu

Iiheader

Iheda eyehlayo

Abahluli

Isicatshulwa

Iifom

Iinketho zokwehla

Ukusetyenziswa

Ngeempawu zedatha

NgeJavaScript

data-toggle="dropdown"isafuneka

Iinketho

Iindlela

Iziganeko

`data-toggle="dropdown"`isafuneka