Pudotusvalikosta

Vaihda kontekstuaaliset peittokuvat linkkiluetteloiden ja muiden näyttämiseksi Bootstrap-pudotusvalikon avulla.

Yleiskatsaus

Avattavat valikot ovat vaihdettavissa, kontekstuaaliset peittokuvat linkkiluetteloiden näyttämiseen ja paljon muuta. Ne on tehty interaktiivisiksi mukana tulevalla Bootstrap-pudotusvalikon JavaScript-laajennuksella. Ne vaihdetaan napsauttamalla, ei viemällä hiiri; tämä on tahallinen suunnittelupäätös .

Avattavat valikot perustuvat kolmannen osapuolen kirjastoon Popper.js , joka tarjoaa dynaamisen paikantamisen ja näkymän havaitsemisen. Muista lisätä popper.min.js ennen Bootstrapin JavaScriptiä tai käyttää bootstrap.bundle.min.js/ bootstrap.bundle.jsjoka sisältää Popper.js:n. Popper.js:ää ei kuitenkaan käytetä avattavien valikoiden sijoittamiseen navigointipalkeissa, koska dynaamista paikannusta ei tarvita.

Jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.js .

Esteettömyys

WAI ARIA -standardi määrittelee varsinaisen role="menu"widgetin , mutta tämä koskee vain sovellusmaisia valikoita, jotka käynnistävät toimintoja tai toimintoja. ARIA -valikot voivat sisältää vain valikkokohtia, valintaruutuvalikkokohteita, valintanappivalikkokohtia, valintanappiryhmiä ja alivalikoita.

Bootstrapin pudotusvalikot on toisaalta suunniteltu yleisiksi ja soveltuvaksi erilaisiin tilanteisiin ja merkintärakenteisiin. On esimerkiksi mahdollista luoda avattavia valikoita, jotka sisältävät lisäsyötteitä ja lomakeohjausobjekteja, kuten hakukenttiä tai kirjautumislomakkeita. Tästä syystä Bootstrap ei odota (ei lisää automaattisesti) mitään todellisten ARIA - valikoiden edellyttämistä roleja -määritteistä. Kirjoittajien on sisällytettävä nämä tarkemmat attribuutit itse.aria-

Bootstrap kuitenkin lisää sisäänrakennetun tuen useimmille tavallisille näppäimistövalikon vuorovaikutuksille, kuten mahdollisuuden liikkua yksittäisten .dropdown-itemelementtien välillä kohdistinnäppäimillä ja sulkea valikko ESCnäppäimellä.

Esimerkkejä

Kääri avattavan valikon kytkin (painike tai linkki) ja avattava valikko sisään .dropdowntai muuhun elementtiin, joka ilmoittaa position: relative;. Pudotusvalikot voidaan laukaista <a>tai <button>elementeistä, jotka sopivat paremmin mahdollisiin tarpeisiisi.

Yksi painike

Mikä tahansa single .btnvoidaan muuttaa pudotusvalikon vaihtokytkimeksi muutamilla merkintämuutoksilla. Näin voit laittaa ne toimimaan jommankumman <button>elementin kanssa:

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

Ja <a>elementeillä:

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

Parasta on, että voit tehdä tämän myös millä tahansa painikeversiolla:

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

Split-painike

Samoin voit luoda jaetun painikkeen avattavia valikoita, joissa on käytännössä samat merkinnät kuin yhden painikkeen avattavat valikot, mutta lisäämällä .dropdown-toggle-splitoikean välin pudotusvalikon ympärille.

Käytämme tätä ylimääräistä luokkaa pienentämään vaakasuoraa paddingkennon kummallakin puolella 25 % ja poistamaan margin-lefttavallisiin painikkeiden pudotusvalikoihin lisätyn. Nämä lisämuutokset pitävät pisteen keskitettynä jakopainikkeessa ja tarjoavat sopivamman kokoisen osumaalueen pääpainikkeen viereen.

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

Mitoitus

Painikkeiden avattavat valikot toimivat kaikenkokoisten painikkeiden kanssa, mukaan lukien oletusarvoiset ja jaetut avattavat painikkeet.

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

Ohjeet

Pudotus

Aktivoi avattavat valikot elementtien yläpuolella lisäämällä .dropupne yläelementtiin.

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

Dropright

Laukaise avattavat valikot elementtien oikealla puolella lisäämällä .droprightne pääelementtiin.

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

Dropleft

Laukaise avattavat valikot elementtien vasemmalla puolella lisäämällä .dropleftne pääelementtiin.

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

Historiallisesti pudotusvalikon sisällön piti olla linkkejä, mutta se ei ole enää versiossa 4. Nyt voit valinnaisesti käyttää <button>elementtejä pudotusvalikoissasi pelkän <a>s:n sijaan.

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

Voit myös luoda ei-interaktiivisia avattavia kohteita .dropdown-item-text. Voit vapaasti muokata tyyliä lisää mukautettujen CSS- tai tekstiapuohjelmien avulla.

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

Aktiivinen

Lisää .activekohteita avattavassa valikossa muokataksesi niitä aktiivisiksi .

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

Liikuntarajoitteinen

Lisää .disabledkohteita avattavassa valikossa muokataksesi ne käytöstä poistetuiksi .

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

Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 %:sti ylätasonsa yläpuolelle ja vasemmalle puolelle. Lisää .dropdown-menu-righta .dropdown-menu-kohtaan oikealle tasaa avattava valikko.

Varoitus! Pudotusvalikot sijoitetaan Popper.js:n ansiosta (paitsi silloin, kun ne sisältyvät navigointipalkkiin).

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

Responsiivinen kohdistus

Jos haluat käyttää reagoivaa tasausta, poista dynaaminen paikannus käytöstä lisäämällä data-display="static"attribuutti ja käytä responsiivisia muunnelmaluokkia.

Tasaa avattava valikko oikealle annettuun tai suurempaan keskeytyskohtaan lisäämällä .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

Tasaa vasemmalle avattava valikko tietyn tai suuremman keskeytyskohdan kanssa lisäämällä .dropdown-menu-rightja .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Huomaa, että sinun ei tarvitse lisätä data-display="static"attribuuttia navigointipalkkien avattaviin painikkeisiin, koska Popper.js:ää ei käytetä navigointipalkissa.

Otsikot

Lisää otsikko minkä tahansa avattavan valikon toimintoosioille.

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

Jakajat

Erottele toisiinsa liittyvien valikkokohtien ryhmät jakajalla.

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

Teksti

Sijoita vapaamuotoinen teksti tekstiä sisältävään pudotusvalikkoon ja käytä välilyöntejä . Huomaa, että tarvitset todennäköisesti lisää kokotyylejä valikon leveyden rajoittamiseksi.

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

Lomakkeet

Lisää lomake avattavaan valikkoon tai tee siitä avattava valikko ja käytä marginaali- tai täyteapuohjelmia antaaksesi sille tarvitsemasi negatiivinen tila.

<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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Käytä data-offsettai data-referencevaihtaaksesi pudotusvalikon sijaintia.

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

Käyttö

Tietomääritteiden tai JavaScriptin avulla avattava laajennus vaihtaa piilotettua sisältöä (pudotusvalikot) vaihtamalla .showluokkaa ylätason luettelokohteessa. Attribuuttia data-toggle="dropdown"käytetään sovellustason pudotusvalikoiden sulkemiseen, joten on hyvä idea käyttää sitä aina.

Kosketuskäyttöisissä laitteissa avattavan valikon avaaminen lisää tyhjät ( $.noop) mouseoverkäsittelijät <body>elementin välittömiin lapsiin. Tämä kieltämättä ruma hakkerointi on välttämätön iOS-tapahtuman delegoinnin omituisuuden kiertämiseksi , mikä muuten estäisi napautusta missään avattavan valikon ulkopuolella käynnistämästä koodia, joka sulkee avattavan valikon. Kun pudotusvalikko on suljettu, nämä ylimääräiset tyhjät mouseoverkäsittelijät poistetaan.

Tietomääritteiden kautta

Lisää data-toggle="dropdown"linkkiin tai painikkeeseen avataksesi avattavan valikon.

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

JavaScriptin kautta

Kutsu avattavat valikot JavaScriptin kautta:

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

`data-toggle="dropdown"`edelleen vaaditaan

Riippumatta siitä, kutsutko avattavaa valikkoa JavaScriptin kautta vai käytätkö sen sijaan data-api:tä, data-toggle="dropdown"sen on aina oltava läsnä avattavan valikon triggerelementissä.

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-offset="".

Nimi	Tyyppi	Oletus	Kuvaus
offset	numero \| merkkijono \| toiminto	0	Pudotusvalikon poikkeama suhteessa tavoitteeseen. Kun funktiota käytetään määrittämään siirtymä, sitä kutsutaan objektilla, joka sisältää offset-tiedot ensimmäisenä argumenttina. Funktion on palautettava objekti, jolla on sama rakenne. Liipaisuelementin DOM-solmu välitetään toisena argumenttina. Lisätietoja on Popper.js:n offset-dokumenteissa .
voltti	boolean	totta	Anna pudotusvalikon kääntyä, jos viiteelementti on päällekkäin. Lisätietoja on Popper.js:n flip-dokumenteissa .
rajaa	merkkijono \| elementti	'scrollParent'	Avattavan valikon ylivuotorajoitusraja. Hyväksyy arvot `'viewport'`, `'window'`, `'scrollParent'`, tai HTMLElement-viittauksen (vain JavaScript). Lisätietoja on Popper.js:n preventOverflow-dokumenteissa .
viite	merkkijono \| elementti	'vaihda'	Pudotusvalikon viiteelementti. Hyväksyy arvot `'toggle'`, `'parent'`, tai HTMLElement-viittauksen. Lisätietoja on Popper.js:n referenssiobjektidokumenteissa .
näyttö	merkkijono	'dynaaminen'	Oletusarvoisesti käytämme Popper.js:ää dynaamiseen paikannukseen. Poista tämä käytöstä käyttämällä `static`.
popperConfig	nolla \| esine	tyhjä	Jos haluat muuttaa Bootstrapin Popper.js-oletusasetusta, katso Popper.js:n määritykset

Huomaa, kun boundaryarvoksi on asetettu jokin muu arvo kuin 'scrollParent', tyyliä position: statickäytetään .dropdownsäilöön.

menetelmät

Menetelmä	Kuvaus
`$().dropdown('toggle')`	Vaihtaa tietyn navigointipalkin tai välilehdellä varustetun navigoinnin avattavan valikon.
`$().dropdown('show')`	Näyttää tietyn navigointipalkin tai välilehtinavigoinnin avattavan valikon.
`$().dropdown('hide')`	Piilottaa tietyn navigointipalkin tai välilehdellä varustetun navigoinnin avattavan valikon.
`$().dropdown('update')`	Päivittää elementin avattavan valikon sijainnin.
`$().dropdown('dispose')`	Tuhoaa elementin pudotusvalikon.

Tapahtumat

Kaikki pudotusvalikon tapahtumat käynnistetään .dropdown-menupääelementissä, ja niillä on relatedTargetominaisuus, jonka arvo on vaihto-ankkurielementti. hide.bs.dropdownja hidden.bs.dropdowntapahtumilla on clickEventominaisuus (vain kun alkuperäinen tapahtumatyyppi on click), joka sisältää napsautustapahtuman Tapahtumaobjektin.

Tapahtuma	Kuvaus
`show.bs.dropdown`	Tämä tapahtuma käynnistyy välittömästi, kun show-instanssimenetelmää kutsutaan.
`shown.bs.dropdown`	Tämä tapahtuma käynnistyy, kun pudotusvalikko on näkyvissä käyttäjälle (odottaa CSS-siirtymien valmistumista).
`hide.bs.dropdown`	Tämä tapahtuma käynnistyy välittömästi, kun piiloilmentymämenetelmä on kutsuttu.
`hidden.bs.dropdown`	Tämä tapahtuma käynnistyy, kun avattava valikko on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista).

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

Pudotusvalikosta

Yleiskatsaus

Esteettömyys

Esimerkkejä

Yksi painike

Split-painike

Mitoitus

Ohjeet

Pudotus

Dropright

Dropleft

Valikkokohteet

Aktiivinen

Liikuntarajoitteinen

Valikon tasaus

Responsiivinen kohdistus

Valikon sisältö

Otsikot

Jakajat

Teksti

Lomakkeet

Käyttö

Tietomääritteiden kautta

JavaScriptin kautta

`data-toggle="dropdown"`edelleen vaaditaan

Vaihtoehdot

menetelmät

Tapahtumat

Pudotusvalikosta

Yleiskatsaus

Esteettömyys

Esimerkkejä

Yksi painike

Split-painike

Mitoitus

Ohjeet

Pudotus

Dropright

Dropleft

Valikkokohteet

Aktiivinen

Liikuntarajoitteinen

Valikon tasaus

Responsiivinen kohdistus

Valikon sisältö

Otsikot

Pudotusvalikon otsikko

Jakajat

Teksti

Lomakkeet

Pudotusvalikon vaihtoehdot

Käyttö

Tietomääritteiden kautta

JavaScriptin kautta

data-toggle="dropdown"edelleen vaaditaan

Vaihtoehdot

menetelmät

Tapahtumat

`data-toggle="dropdown"`edelleen vaaditaan