Source

Okwehliswayo

Guqula izimbondela zokuqukethwe ukuze ubonise izinhlu zezixhumanisi nokunye okwengeziwe nge-plugin eyehlayo ye-Bootstrap.

Uhlolojikelele

Okwehliswayo kuyaguquleka, imbondela yomongo yokubonisa izinhlu zezixhumanisi nokuningi. Enziwe asebenzisane ne-plugin ye-JavaScript eyehlayo ye-Bootstrap efakiwe. Aguqulwa ngokuchofoza, hhayi ngokuhambisa phezulu; lesi yisinqumo sokuklama ngamabomu.

Okwehliswayo kwakhelwe kulabhulali yezinkampani zangaphandle, i- Popper.js , ehlinzeka ngokuma okuguquguqukayo nokutholwa kwembobo yokubuka. Qiniseka ukuthi ufaka i- popper.min.js ngaphambi kwe-JavaScript ye-Bootstrap noma sebenzisa bootstrap.bundle.min.js/ bootstrap.bundle.jsequkethe i-Popper.js. I-Popper.js ayisetshenziselwa ukubeka okwehlayo kuma-navbar nakuba ukuma okuguquguqukayo kungadingeki.

Uma wakha i-JavaScript yethu ngomthombo, idingautil.js .

Ukufinyeleleka

Izinga le- WAI ARIArole="menu" lichaza iwijethi yangempela , kodwa lokhu kuqondiswe kumamenyu afana nohlelo lokusebenza aqalisa izenzo noma imisebenzi. Amamenyu e -ARIA angaqukatha kuphela izinto zemenyu, izinto zemenyu yebhokisi lokuhlola, izinto zemenyu yezinkinobho zomsakazo, amaqembu ezinkinobho zomsakazo, namamenyu amancane.

Okwehliswayo kwe-Bootstrap, ngakolunye uhlangothi, kuklanyelwe ukuthi kube yijenerikhi futhi kusebenze ezimeni ezahlukahlukene kanye nezakhiwo zokumaka. Isibonelo, kungenzeka ukudala okwehliswayo okuqukethe okokufaka okwengeziwe nezilawuli zefomu, njengezinkambu zokusesha noma amafomu okungena ngemvume. Ngalesi sizathu, i-Bootstrap ayilindele (noma yengeze ngokuzenzakalelayo) noma yiziphi roleizibaluli aria-ezidingekayo kumamenyu e -ARIA eqiniso. Ababhali kuyodingeka bafake lezi zibaluli eziqondile ngokwabo.

Kodwa-ke, i-Bootstrap iyengeza usekelo olwakhelwe ngaphakathi lokusebenzisana kwemenyu yekhibhodi ejwayelekile, njengokukwazi ukuhamba phakathi .dropdown-itemkwezakhi ngazinye usebenzisa okhiye bekhesa nokuvala imenyu ESCngokhiye.

Izibonelo

Goqa inguquko yokudonsela phansi (inkinobho noma isixhumanisi sakho) kanye nemenyu yokudonsela phansi ngaphakathi .dropdown, noma enye into ememezela position: relative;. Okwehliswayo kungase kuqaliswe kusuka <a>noma ama <button>-elementi ukuze kulingane kangcono nezidingo zakho ezingaba khona.

Okwehliswayo kwenkinobho eyodwa

Noma iyiphi ingoma eyodwa .btningashintshwa ibe okokudonsela phansi ngezinye izinguquko zemakhaphu. Nansi indlela ongazisebenzisa ngayo noma yiziphi <button>izici:

Action Another action Something else here 
<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>

Futhi ngama- <a>elementi:

Action Another action Something else here 
<div class="dropdown show">
  <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>

Ingxenye engcono kakhulu ukuthi ungakwenza lokhu nganoma yikuphi okuhlukile kwenkinobho, futhi:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Okwehliswayo kwenkinobho yokuhlukanisa

Ngokufanayo, dala okwehliswayo kwenkinobho yokuhlukanisa okunophawu olufanayo nolwehlayo lwenkinobho eyodwa, kodwa ngokungezwa kwesikhala .dropdown-toggle-splitesifanele endaweni yokunakekela okwehlayo.

Sisebenzisa lesi sigaba esengeziwe ukuze sinciphise okuvundlile paddingnhlangothi zombili ze-caret ngo-25% futhi sisuse margin-leftlokho okwengezwe ekwehliseni phansi kwezinkinobho ezivamile. Lezo zinguquko ezengeziwe zigcina i-caret igxile enkinobheni yokuhlukanisa futhi inikeza indawo yokushaya enosayizi ofanele eduze kwenkinobho eyinhloko.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Ukulinganisa

Okwehliswayo kwezinkinobho kusebenza ngezinkinobho zabo bonke osayizi, okuhlanganisa nezinkinobho ezizenzakalelayo nezihlukanisayo ezidonsela phansi.

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

Ukwehluka kokulahla

Qalisa amamenyu okwehlayo ngenhla kwezici ngokwengeza .dropupengxenyeni engumzali.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Ukuhluka kwe-Dropright

Qalisa amamenyu okwehlayo kwesokudla sezakhi ngokwengeza .droprightkusici esingumzali.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Ukuhluka kwe-Dropleft

Qalisa amamenyu okwehlayo kwesokunxele sezinto ngokwengeza .dropleftkusici esingumzali.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Ngokomlando okuqukethwe kwemenyu eyehlayo bekufanele kube izixhumanisi, kodwa akusenjalo nge-v4. Manje ungakhetha ukusebenzisa <button>izici kokwehliswayo kwakho esikhundleni sika- <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>

Ngokuzenzakalelayo, imenyu yokudonsela phansi imiswa ngokuzenzakalelayo ngo-100% ukusuka phezulu nangakwesokunxele somzali wayo. Engeza .dropdown-menu-rightkokuthi a .dropdown-menuukuze uqondanise kwesokudla imenyu eyehlayo.

Amakhanda phezulu! Okwehliswayo kubekwe ngenxa ye-Popper.js (ngaphandle uma kuqukethwe ku-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>

Engeza unhlokweni kulebula izigaba zezenzo kunoma iyiphi imenyu eyehlayo.

Unhlokweni owehlayo
Isenzo Esinye isenzo 
<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>

Hlukanisa amaqembu ezinto zemenyu ezihlobene ngesihlukanisi.

Isenzo Esinye isenzo Okunye lapha
Isixhumanisi esihlukanisiwe 
<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>

Faka ifomu kumenyu eyehlayo, noma ulenze libe yimenyu eyehlayo, futhi usebenzise imajini noma izinto zokunamathisela ukuze ulinikeze isikhala esingesihle osidingayo.

Okusha lapha? bhalisela Ukhohlwe iphasiwedi? 
<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>

Izinto zemenyu ezisebenzayo

Engeza .activeezintweni kokwehliswayo ukuze wenze isitayela njengezisebenzayo .

Isixhumanisi esijwayelekile Isixhumanisi esisebenzayo Esinye isixhumanisi 
<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>

Izinto zemenyu ezikhutshaziwe

Engeza .disabledezintweni kokwehliswayo ukuze wenze isitayela njengezikhutshaziwe .

Isixhumanisi esijwayelekile Isixhumanisi sikhutshaziwe Esinye isixhumanisi 
<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>

Ukusetshenziswa

Ngezibaluli zedatha noma i-JavaScript, i-plugin eyehlayo iguqula okuqukethwe okufihliwe (amamenyu okwehliswayo) ngokuguqula .showikilasi entweni yohlu lwabazali. Isibaluli data-toggle="dropdown"kuthenjelwe kuso ekuvaleni amamenyu okwehlayo ezingeni lesicelo, ngakho-ke kuwumqondo omuhle ukusisebenzisa njalo.

Kumadivayisi anikwe amandla ukuthinta, ukuvula okwehliswayo kwengeza izibambi ezingenalutho ( $.noop) mouseoverezinganeni eziseduze ze- <body>elementi. Lokhu kugebenga okuvunyiwe ukuthi kubi kuyadingeka ukuze kulungiswe okuthile ekuthunyelweni komcimbi we-iOS , okungavimbela ukuthepha noma yikuphi ngaphandle kokwehliswayo ukuthi kungacuphi ikhodi evala okwehliswayo. Uma okwehliswayo sekuvaliwe, lezi mouseoverzibambi ezengeziwe ezingenalutho ziyasuswa.

Ngezibaluli zedatha

Engeza data-toggle="dropdown"kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.

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

Nge-JavaScript

Shayela okwehliswayo nge-JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"kusadingeka

Kungakhathaliseki ukuthi ushayela okwehliswayo ucingo nge-JavaScript noma esikhundleni salokho sebenzisa i-data-api, data-toggle="dropdown"kuyadingeka njalo ukuthi ube khona kusici sokuqala sokwehliswayo.

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset="".

Igama Uhlobo Okuzenzakalelayo Incazelo
offset inombolo | umucu | umsebenzi 0 I-offset yokwehliswayo ihlobene nethagethi yakhona. Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's offset docs .
flip boolean iqiniso Vumela Okwehlayo ukuthi kuphendulwe uma kwenzeka kugqagqana kusici sesithenjwa. Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's flip docs .
umngcele umucu | isici 'scrollParent' Umkhawulo womkhawulo wokuchichima wemenyu eyehlayo. Yamukela amanani we- 'viewport', 'window', 'scrollParent', noma ireferensi ye-HTMLElement (JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka ku-Popper.js's preventOverflow amadokhumenti .

Qaphela boundaryukuthi isethwe nini kunoma yiliphi inani ngaphandle kokuthi 'scrollParent', isitayela position: staticsisetshenziswa .dropdownesitsheni.

Izindlela

Indlela Incazelo
$().dropdown('toggle') Iguqula imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.
$().dropdown('update') Ibuyekeza indawo yokudonsela phansi kwe-elementi.
$().dropdown('dispose') Icekela phansi i-elementi.

Imicimbi

Yonke imicimbi eyehliswayo ixoshwa ku- .dropdown-menuelementi engumzali futhi relatedTargetinendawo, inani layo eliyi-elementi yehange eshintshayo.

Umcimbi Incazelo
show.bs.dropdown Lo mcimbi uvutha ngokushesha lapho indlela yesibonelo sombukiso ibizwa.
shown.bs.dropdown Lo mcimbi uxoshwa lapho okwehliswayo kwenziwe kwabonakala kumsebenzisi (sizolinda izinguquko ze-CSS, ukuze ziqedele).
hide.bs.dropdown Lo mcimbi uxoshwa ngokushesha lapho indlela yokufihla isibiziwe.
hidden.bs.dropdown Lo mcimbi uyaxoshwa lapho okwehliswayo sekuqedile ukufihlwa kumsebenzisi (kuzolinda izinguquko ze-CSS, ukuze ziqedele). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})