Nā hāʻule iho

E hoʻololi i nā uhi ʻokoʻa no ka hōʻike ʻana i nā papa inoa o nā loulou a me nā mea hou aku me ka Bootstrap dropdown plugin.

Nānā nui

Hiki ke hoʻololi ʻia nā hāʻule iho, nā overlay contextual no ka hōʻike ʻana i nā papa inoa o nā loulou a me nā mea hou aku. Hoʻopili ʻia lākou me ka plugin Bootstrap dropdown JavaScript plugin. Hoʻololi ʻia lākou ma ke kaomi ʻana, ʻaʻole ma ka lele ʻana; he hoʻoholo manaʻo hoʻolālā kēia .

Hoʻokumu ʻia nā Dropdowns ma kahi waihona ʻaoʻao ʻekolu, ʻo Popper , kahi e hāʻawi ai i ke kūlana hoʻoikaika a me ka ʻike ʻana i ka ʻike. E ʻoluʻolu e hoʻokomo i ka popper.min.js ma mua o kā Bootstrap JavaScript a i ʻole hoʻohana bootstrap.bundle.min.js/ bootstrap.bundle.jsi loaʻa iā Popper. ʻAʻole hoʻohana ʻia ʻo Popper e hoʻonoho i nā hāʻule i loko o nā navbars ʻoiai ʻaʻole koi ʻia ke kūlana hoʻoikaika.

Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia .

Hiki ke komo

ʻO ka maʻamau WAI ARIA ka wehewehe ʻana i kahi role="menu"widget maoli , akā kikoʻī kēia i nā menus e like me ka noi e hoʻoulu i nā hana a i ʻole nā hana. Hiki i nā papa kuhikuhi ARIA ke loaʻa nā mea papa inoa, nā mea koho pahu pahu, nā mea papa kuhikuhi kīwila, nā pūʻulu pihi lekiō, a me nā papa kuhikuhi.

ʻO nā hāʻule iho o Bootstrap, ma ka ʻaoʻao ʻē aʻe, ua hoʻolālā ʻia i mea maʻamau a pili i nā kūlana like ʻole a me nā hoʻolālā markup. No ka laʻana, hiki ke hana i nā hāʻule iho i loaʻa nā mea hoʻokomo hou a me nā mana palapala, e like me nā kahua ʻimi a i ʻole nā palapala komo. No kēia kumu, ʻaʻole manaʻo ʻo Bootstrap (ʻaʻole hoʻohui ʻia) i kekahi o nā ʻano rolea me aria-nā ʻano i koi ʻia no nā menus ARIA ʻoiaʻiʻo. Pono nā mea kākau e hoʻokomo i kēia mau ʻano kikoʻī iā lākou iho.

Eia nō naʻe, hoʻohui ʻo Bootstrap i ke kākoʻo i kūkulu ʻia no ka hapa nui o nā papa kuhikuhi papa kuhikuhi maʻamau, e like me ka hiki ke neʻe i nā .dropdown-itemmea hoʻokahi me ka hoʻohana ʻana i nā kī cursor a pani i ka papa kuhikuhi me ke ESCkī.

Nā laʻana

E kāʻei i ke koli o ka hāʻule iho (kāu pihi a i ʻole ka loulou) a me ka papa kuhikuhi hāʻule i loko o .dropdown, a i ʻole kekahi mea e hōʻike ana position: relative;. Hiki ke hoʻoulu ʻia nā dropdowns mai a i <a>ʻole <button>nā mea e kūpono i kāu mau pono pono.

pihi hoʻokahi

Hiki ke hoʻololi ʻia kēlā me kēia i kahi .btnhoʻololi i lalo me kekahi mau hoʻololi markup. Eia pehea ʻoe e hoʻohana ai iā lākou me nā <button>mea ʻelua:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

A me <a>nā mea:

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

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

ʻO ka ʻāpana maikaʻi loa hiki iā ʻoe ke hana i kēia me kekahi ʻano pihi, pū kekahi:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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>

Pihi hoʻokaʻawale

Pēlā nō, e hana i nā pihi hoʻokaʻawale me ka hoʻohālikelike like me nā pihi hoʻokahi, akā me ka hoʻohui ʻana .dropdown-toggle-splitno ka spacing kūpono a puni ka papa iho.

Hoʻohana mākou i kēia papa ʻē aʻe e hōʻemi i ka pae ākea paddingma kēlā ʻaoʻao kēia ʻaoʻao o ka caret e 25% a wehe i ka margin-leftmea i hoʻohui ʻia no ka hāʻule iho o nā pihi maʻamau. ʻO kēlā mau hoʻololi ʻē aʻe e hoʻomau i ka mālama mālama i ke pihi hoʻokaʻawale a hāʻawi i kahi ʻāpana kūpono kūpono ma ka ʻaoʻao o ke pihi nui.

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

Ka nui ana

Hoʻohana nā pihi hāʻule i lalo me nā pihi o nā nui āpau, me nā pihi paʻamau a me nā pihi hoʻokaʻawale.

<!-- 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-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-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-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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Nā kuhikuhi

Hoʻokuʻu

E ho'āla i nā menus hāʻule iho ma luna o nā ʻeleʻele ma ka hoʻohui .dropupʻana i ka mea makua.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

E ho'āla i nā menus hāʻule iho ma ka ʻākau o nā mea ma ka hoʻohui .droprightʻana i ka ʻeleʻele makua.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

hema hema

E ho'āla i nā menus hāʻule iho ma ka ʻaoʻao hema o nā mea ma ka hoʻohui .dropleftʻana i ka mea makua.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>

Pono nā loulou i ka papa kuhikuhi papa kuhikuhi moʻolelo , akā ʻaʻole ia ka hihia me v4. I kēia manawa hiki iā ʻoe ke hoʻohana i <button>nā mea i loko o kāu dropdown ma kahi o <a>s wale nō.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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>

Hiki nō hoʻi iā ʻoe ke hana i nā mea hoʻokuʻu i lalo me ka .dropdown-item-text. E ʻoluʻolu e hana hou me ka CSS maʻamau a i ʻole nā mea pono kikokikona.

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

ʻeleu

Hoʻohui .activei nā mea i loko o ka hāʻule iho e hoʻohua iā lākou me he mea lā .

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

Kinohi

Hoʻohui .disabledi nā mea i loko o ka hāʻule iho e hoʻopaʻa iā lākou me he mea lā i pio .

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

Ma ka maʻamau, hoʻonoho ʻia ka papa kuhikuhi iho i lalo 100% mai luna a ma ka ʻaoʻao hema o kona makua. Hoʻohui .dropdown-menu-righti kahi .dropdown-menue hoʻolike ʻākau i ka papa kuhikuhi hāʻule iho.

Nā poʻo i luna! Hoʻonoho ʻia nā Dropdowns mahalo iā Popper (koe wale nō ke kau ʻia i loko o kahi navbar).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>

Hoʻopololei pane

Inā makemake ʻoe e hoʻohana i ka alignment pane, e hoʻopau i ke kūlana hoʻoikaika ma ka hoʻohui ʻana i ke data-display="static"ʻano a hoʻohana i nā papa hoʻololi pane.

No ka hoʻolikelike ʻana i ka papa kuhikuhi hāʻule iho me ka wahi haʻihaʻi i hāʻawi ʻia a i ʻole ka nui, hoʻohui .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-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>

No ka hoʻolikelike ʻana i ka papa hāʻule i lalo me ka wahi haʻihaʻi i hāʻawi ʻia a i ʻole ka nui, hoʻohui .dropdown-menu-righta .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-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>

E hoʻomanaʻo ʻaʻole pono ʻoe e hoʻohui i kahi data-display="static"ʻano i nā pihi hāʻule i nā navbars, ʻoiai ʻaʻole hoʻohana ʻia ʻo Popper i nā navbars.

Nā poʻomanaʻo

Hoʻohui i kahi poʻomanaʻo e hōʻailona i nā ʻāpana o nā hana ma kekahi papa kuhikuhi.

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

Nā mea hoʻokaʻawale

E hoʻokaʻawale i nā hui o nā mea papa kuhikuhi pili me kahi mea hoʻokaʻawale.

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

kikokikona

E kau i kekahi kikokikona manuahi i loko o kahi papa kuhikuhi iho me nā kikokikona a hoʻohana i nā pono hana spacing . E hoʻomanaʻo, pono paha ʻoe i nā ʻano nui ʻē aʻe e kāohi i ka laulā papa kuhikuhi.

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

Nā palapala

E hoʻokomo i kahi palapala i loko o kahi papa kuhikuhi hāʻule, a i ʻole e hoʻolilo iā ia i loko o kahi papa kuhikuhi, a hoʻohana i ka margin a i ʻole nā mea padding e hāʻawi iā ia i kahi kūpono ʻole āu e makemake ai.

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

E hoʻohana data-offseta data-referencehoʻololi paha i kahi o ka hāʻule iho.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

Hoʻohana

Ma o nā ʻikepili ʻikepili a i ʻole JavaScript, hoʻololi ka plugin dropdown i nā ʻike huna (nā menus dropdown) ma ka hoʻololi ʻana i ka .showpapa ma ka makua .dropdown-menu. Ua data-toggle="dropdown"hilinaʻi ʻia ka ʻano no ka pani ʻana i nā menus dropdown ma kahi pae noi, no laila he manaʻo maikaʻi e hoʻohana mau ia.

Ma nā hāmeʻa hiki ke hoʻopā, wehe i kahi hāʻule i lalo e hoʻohui i nā mea lima ʻole ( $.noop) mouseoveri nā keiki koke o ka <body>mea. Pono kēia hack ʻino ʻino e hana a puni i kahi quirk i ka ʻelele hanana hanana ʻo iOS , i ʻole e pale i kahi paʻi ma waho o ka hāʻule iho mai ka hoʻomaka ʻana i ke code e pani i ka hāʻule. Ke pani ʻia ka hāʻule iho mouseover, wehe ʻia kēia mau mea lima ʻole.

Ma o nā hiʻohiʻona ʻikepili

Hoʻohui data-toggle="dropdown"i kahi loulou a i ʻole pihi e hoʻololi i kahi hāʻule iho.

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

Ma o JavaScript

Kāhea i nā hāʻule iho ma o JavaScript:

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

`data-toggle="dropdown"`koi mau

Inā ʻoe e kāhea i kāu hāʻule iho ma o JavaScript a i ʻole e hoʻohana i ka data-api, data-toggle="dropdown"pono mau e noho ma ka mea hoʻoiho o ka dropdown.

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset="".

inoa	ʻAno	Default	wehewehe
offset	helu \| kaula \| hana	0	Offset o ka hāʻule iho e pili ana i kāna pahu hopu. Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka offset, ua kapa ʻia ia me kahi mea i loaʻa ka ʻikepili offset e like me kāna hoʻopaʻapaʻa mua. Pono ka hana e hoʻihoʻi i kahi mea me ke ʻano like. Hoʻoholo ʻia ka mea hoʻomaka DOM node ma ke ʻano he pane ʻelua. No ka ʻike hou aku, e nānā i nā palapala offset a Popper .
hoʻohuli	boolean	ʻoiaʻiʻo	E ʻae i ka Dropdown e hoʻohuli i ka wā e kau ana ma luna o ka mea kuhikuhi. No ka ʻike hou aku e ʻike i nā palapala huli a Popper .
palena	kaula \| ʻeleʻele	'scrollParent'	ʻO ka palena palena o ka papa kuhikuhi. ʻAe i nā waiwai o `'viewport'`, `'window'`, `'scrollParent'`, a i ʻole HTMLElement reference (JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala preventOverflow a Popper .
kuhikuhi	kaula \| ʻeleʻele	'hoololi'	Mea kuhikuhi o ka papa kuhikuhi. ʻAe i nā waiwai o `'toggle'`, `'parent'`, a i ʻole HTMLElement reference. No ka ʻike hou aku e nānā i ka Popper's referenceObject docs .
hōʻike	kaulahao	'dynamic'	Ma ka maʻamau, hoʻohana mākou iā Popper no ka hoʻonohonoho ʻana. Hoʻopau i kēia me `static`.
popperConfig	null \| mea	null	E hoʻololi i ka hoʻonohonoho Popper paʻamau o Bootstrap, e ʻike i ka hoʻonohonoho ʻana o Popper

E hoʻomaopopo i ka wā boundaryi hoʻonoho ʻia i kekahi waiwai ʻē aʻe ma mua o 'scrollParent', position: staticua hoʻohana ʻia ke ʻano i ka .dropdownipu.

Nā ʻano hana

Kaʻina hana	wehewehe
`$().dropdown('toggle')`	Hoʻololi i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
`$().dropdown('show')`	Hōʻike i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
`$().dropdown('hide')`	Hūnā i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
`$().dropdown('update')`	Hoʻohou i ke kūlana o ka hāʻule iho o kahi mea.
`$().dropdown('dispose')`	Hoʻopau i ka hāʻule iho o kahi mea.

Nā hanana

Hoʻopau ʻia nā hanana hāʻule i lalo i ka ʻeleʻele .dropdown-menumakua a loaʻa iā ia kahi relatedTargetwaiwai, nona ka waiwai o ka mea heleuma e hoʻohuli ana. hide.bs.dropdowna hidden.bs.dropdownhe clickEventwaiwai ko nā hanana (ʻo ia wale nō ke ʻano hanana kumu click) i loaʻa i kahi hanana hanana no ka hanana kaomi.

Hanana	wehewehe
`show.bs.dropdown`	Hoʻopau koke ʻia kēia hanana ke kāhea ʻia ke ʻano hana hōʻike.
`shown.bs.dropdown`	Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka hāʻule iho i ka mea hoʻohana (e kali no nā hoʻololi CSS, e hoʻopau).
`hide.bs.dropdown`	Hoʻopau koke ʻia kēia hanana i ka wā i kāhea ʻia ai ke ʻano hide instance.
`hidden.bs.dropdown`	Hoʻopau ʻia kēia hanana i ka pau ʻana o ka hūnā ʻia mai ka mea hoʻohana (e kali no ka hoʻololi CSS, e hoʻopau).

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

Nā hāʻule iho

Nānā nui

Hiki ke komo

Nā laʻana

pihi hoʻokahi

Pihi hoʻokaʻawale

Ka nui ana

Nā kuhikuhi

Hoʻokuʻu

Dropright

hema hema

Nā mea papa kuhikuhi

ʻeleu

Kinohi

Hoʻoponopono papa kuhikuhi

Hoʻopololei pane

Menu maʻiʻo

Nā poʻomanaʻo

Nā mea hoʻokaʻawale

kikokikona

Nā palapala

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Ma o JavaScript

`data-toggle="dropdown"`koi mau

Nā koho

Nā ʻano hana

Nā hanana

Nā hāʻule iho

Nānā nui

Hiki ke komo

Nā laʻana

pihi hoʻokahi

Pihi hoʻokaʻawale

Ka nui ana

Nā kuhikuhi

Hoʻokuʻu

Dropright

hema hema

Nā mea papa kuhikuhi

ʻeleu

Kinohi

Hoʻoponopono papa kuhikuhi

Hoʻopololei pane

Menu maʻiʻo

Nā poʻomanaʻo

Poʻomanaʻo hāʻule iho

Nā mea hoʻokaʻawale

kikokikona

Nā palapala

Nā koho hāʻule iho

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Ma o JavaScript

data-toggle="dropdown"koi mau

Nā koho

Nā ʻano hana

Nā hanana

`data-toggle="dropdown"`koi mau