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.

Kūkulu ʻia nā dropdown ma kahi waihona ʻaoʻao ʻekolu, ʻo Popper.js , kahi e hāʻawi ai i ke kūlana hoʻoikaika a me ka ʻike ʻana. 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.jsaia i loko o Popper.js. ʻAʻole hoʻohana ʻia ʻo Popper.js e hoʻonoho i nā hāʻule i lalo i 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.

Hoʻokuʻu iho nā 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" 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>

A me <a>nā mea:

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

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

E hoʻokaʻawale i nā pihi i lalo

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

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

Hoʻololi hāʻule

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

Hoʻololi 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-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>

Hoʻololi dropleft

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

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

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ā hāʻule i lalo i ka mahalo iā Popper.js (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-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>

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>

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>

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

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>

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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Hoʻohana

Ma o nā ʻikepili ʻikepili a i ʻole JavaScript, hoʻololi ka plugin dropdown i ka ʻike huna (nā menus dropdown) ma ka hoʻololi ʻana i ka .showpapa ma ka mea papa inoa makua. 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 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>

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. No ka ʻike hou aku e nānā i nā palapala offset a Popper.js .
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 nānā i nā palapala flip a Popper.js .
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.js .

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('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.

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

Hoʻokuʻu iho nā pihi hoʻokahi

E hoʻokaʻawale i nā pihi i lalo

Ka nui ana

Hoʻololi hāʻule

Hoʻololi Dropright

Hoʻololi dropleft

Nā mea papa kuhikuhi

Hoʻoponopono papa kuhikuhi

Nā poʻomanaʻo menu

Nā mea hoʻokaʻawale menu

Nā palapala menu

Nā mea papa kuhikuhi hana

Hoʻopaʻa ʻia nā mea papa kuhikuhi

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

Hoʻokuʻu iho nā pihi hoʻokahi

E hoʻokaʻawale i nā pihi i lalo

Ka nui ana

Hoʻololi hāʻule

Hoʻololi Dropright

Hoʻololi dropleft

Nā mea papa kuhikuhi

Hoʻoponopono papa kuhikuhi

Nā poʻomanaʻo menu

Poʻomanaʻo hāʻule iho

Nā mea hoʻokaʻawale menu

Nā palapala menu

Nā mea papa kuhikuhi hana

Hoʻopaʻa ʻia nā mea papa kuhikuhi

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