Nneɛma a wɔde gu fam

Toggle contextual overlays ma ɛkyerɛ links a wɔahyehyɛ ne nea ɛkeka ho denam Bootstrap dropdown plugin no so.

Nsɛm a Wɔaka abom

Dropdowns yɛ toggleable, nsɛm a ɛfa ho a wɔde kata so a wɔde kyerɛ link ahorow a wɔahyehyɛ ne nea ɛkeka ho. Wɔde Bootstrap dropdown JavaScript plugin a ɛka ho no ayɛ nkitahodi. Wɔnam klik so na ɛsakra wɔn, na ɛnyɛ sɛ wɔde wɔn ho to so; eyi yɛ gyinaesi a wɔahyɛ da ayɛ wɔ nhyehyɛe ho .

Wɔasi dropdowns wɔ nhomakorabea a ɛto so abiɛsa, Popper , a ɛma gyinabea a ɛyɛ nnam ne viewport detection. Hwɛ hu sɛ wode popper.min.js bɛka ho ansa na Bootstrap no JavaScript aba anaa fa bootstrap.bundle.min.js/ bootstrap.bundle.jsa Popper wom di dwuma. Popper nnyɛ mfa nsi dropdowns wɔ navbars ɛwom sɛ sɛnea dynamic positioning nhia.

Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .

Nneɛma a wotumi nya

WAI ARIA gyinapɛn no kyerɛkyerɛ widget ankasa mu role="menu", nanso eyi yɛ pɔtee ma application-te sɛ menus a ɛkanyan nneyɛe anaa dwumadi ahorow. ARIA menu ahorow no betumi akura menu nneɛma, checkbox menu nneɛma, radio bɔtn menu nneɛma, radio bɔtn akuw, ne menu nketewa nkutoo.

Nanso, wɔayɛ Bootstrap dropdowns no sɛnea ɛbɛyɛ a ɛbɛyɛ nea ɛfa biribiara ho na ɛyɛ adwuma wɔ tebea horow ne agyiraehyɛde nhyehyɛe ahorow mu. Sɛ nhwɛso no, wobetumi ayɛ dropdowns a ɛwɔ inputs foforo ne form controls, te sɛ search fields anaa login forms. Esiane eyi nti, Bootstrap nhwɛ kwan (anaasɛ ɛde bɛka ho ankasa) rolene aria-su ahorow a ɛho hia ma nokware ARIA menu ahorow no mu biara. Ɛsɛ sɛ akyerɛwfo ankasa de saa su ahorow a ɛyɛ pɔtee kɛse yi ka ho.

Nanso, Bootstrap de mmoa a wɔasisi mu ka ho ma keyboard menu nkitahodi dodow no ara a ɛyɛ gyinapɛn, te sɛ tumi a wode bɛfa nneɛma ankorankoro .dropdown-itemmu denam cursor safoa no so na wode safoa no ato menu no mu ESC.

Nhwɛso ahorow

Fa dropdown no toggle (wo button anaa link) ne dropdown menu no kyekyere .dropdown, anaa element foforo a ɛpae mu ka position: relative;. Wobetumi akanyan dropdowns afi <a>anaa <button>elements mu ma ɛne w’ahiade ahorow a ebetumi aba no ahyia yiye.

Bɔton biako pɛ

.btnWobetumi adan single biara ayɛ no dropdown toggle a markup nsakrae ahorow bi wom. Sɛnea wubetumi de wɔn ayɛ adwuma ne <button>elements abien no mu biara ni:

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

Na ɛne <a>element ahorow:

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

Ɔfã a eye sen biara ne sɛ wubetumi ayɛ eyi ne button variant biara, nso:

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

Split button no mu

Saa ara nso na yɛ split button dropdowns a ɛkame ayɛ sɛ markup koro no ara sɛ button dropdowns biako, nanso fa ka ho .dropdown-toggle-splitma kwan a ɛfata twa dropdown caret no ho hyia.

Yɛde saa adesua foforo yi di dwuma de tew horizontal paddinga ɛwɔ caret no afã abien no nyinaa so 25% na yɛayi nea margin-leftwɔde aka ho ama daa button dropdowns no. Saa nsakrae afoforo no ma caret no kɔ mfinimfini wɔ split button no mu na ɛma hit area a ne kɛse fata kɛse wɔ button titiriw no nkyɛn.

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

Sizing a wɔde yɛ nneɛma

Button dropdowns ne buttons a ne kɛse nyinaa yɛ adwuma, a default ne split dropdown buttons ka ho.

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

Akwankyerɛ ahorow

Dropup a ɛwɔ hɔ

Trigger dropdown menus a ɛwɔ element ahorow no atifi denam .dropupawofo element no a wode bɛka ho no so.

<!-- 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 a ɛwɔ hɔ

Trigger dropdown menus wɔ elements no nifa so denam .droprightawofo element no a wode bɛka ho no so.

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

Nsu a ɛtɔ gu fam

Trigger dropdown menus wɔ elements no benkum so denam .dropleftawofo element no a wode bɛka ho no so.

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

Abakɔsɛm mu no na ɛsɛ sɛ dropdown menu mu nsɛm yɛ links, nanso ɛnyɛ saa bio wɔ v4 ho. Afei wobɛtumi de <button>elements adi dwuma wɔ wo dropdowns no mu sen sɛ wode <a>s kɛkɛ bedi dwuma.

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

Wubetumi nso de .dropdown-item-text. Fa ahofadi de CSS anaa nsɛm a wɔde di dwuma a wɔahyɛ da ayɛ no kyerɛw kɔ akyiri.

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

Asɔ

Fa ka .activenneɛma a ɛwɔ dropdown no ho na fa style no sɛ active .

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

Dɛmdie

Fa ka .disablednneɛma a ɛwɔ dropdown no mu ho na fa style no sɛ disabled .

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

Sɛnea wɔahyɛ no, wɔde menu a ɛwɔ fam no si hɔ ankasa 100% fi soro ne ne wofo no benkum so. Fa ka .dropdown-menu-righta ho .dropdown-menukɔ nifa so hyɛ dropdown menu no mu.

Ti a ɛwɔ soro! Dropdowns no wɔ gyinabea aseda Popper (gye sɛ bere a ɛwɔ navbar mu).

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

Mmuae a wɔde hyɛ mu

Sɛ wopɛ sɛ wode mmuaeɛ alignment di dwuma a, ma dynamic positioning no nyɛ adwuma denam data-display="static"attribute no a wode bɛka ho no so na fa responsive variation classes no di dwuma.

Sɛ wopɛ sɛ wode dropdown menu no ne breakpoint a wɔde ama no hyia anaa nea ɛsõ sen saa a, fa ka ho .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>

Sɛ wopɛ sɛ wode benkum so menu a ɛwɔ ase no ne breakpoint a wɔde ama no anaa nea ɛsõ sen saa no hyia a, fa ka ho .dropdown-menu-rightne .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>

Hyɛ no nsow sɛ enhia sɛ wode data-display="static"attribute bi bɛka dropdown buttons ho wɔ navbars mu, efisɛ wɔmfa Popper nni dwuma wɔ navbars mu.

Nsɛmti a wɔde kyerɛw nsɛm

Fa asɛmti bi ka ho fa hyɛ nneyɛe afã horow din wɔ dropdown menu biara mu.

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

Nneɛma a wɔkyekyɛ mu

Fa divider yiyi menu nneɛma a ɛfa ho akuw ahorow mu.

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

Atwerɛ

Fa freeform text biara gu dropdown menu a nsɛm wom mu na fa spacing utilities di dwuma . Hyɛ no nsow sɛ ɛda adi sɛ wubehia sizing styles foforo de asiw menu no trɛw ano.

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

Nkyerɛwee ahorow

Fa kratasin bi hyɛ dropdown menu mu, anaa yɛ no dropdown menu, na fa margin anaa padding utilities di dwuma ma no negative space a wopɛ.

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

Fa data-offsetanaa data-referencesesa beae a ɛwɔ dropdown no.

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

Sɛnea wɔde di dwuma

Ɛnam data attributes anaa JavaScript so no, dropdown plugin no dannan nneɛma a ahintaw (dropdown menus) denam .showadesuakuw no a ɛdannan wɔ ɔwofo no .dropdown-menuso . Wɔde data-toggle="dropdown"wɔn ho to su no so de to dropdown menus mu wɔ application level bi so, enti ɛyɛ adwene pa sɛ wode bedi dwuma bere nyinaa.

Wɔ mfiri a wɔde nsa ka so no, sɛ wubue dropdown a, ɛde handlers a hwee nni mu ( $.noop) ka element mouseoverno mma a wɔbɛn wɔn ntɛm ara no ho. <body>This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , a anka ɛbɛma tap biara a ɛwɔ dropdown no akyi a ɛbɛkanyan code a ɛto dropdown no. Sɛ wɔto dropdown no mu wie a, woyi saa mouseoverhandlers foforo a hwee nni mu yi fi hɔ.

Via data su ahorow so

Fa ka data-toggle="dropdown"link anaa button bi ho na dannan dropdown bi.

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

Ɛdenam JavaScript so

Frɛ nsɛm a ɛwɔ ase hɔ no denam JavaScript so:

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

`data-toggle="dropdown"`wɔda so ara hwehwɛ

Ɛmfa ho sɛ ebia wobɛfrɛ wo dropdown no denam JavaScript so anaasɛ wode data-api no bedi dwuma mmom no, data-toggle="dropdown"ɛhwehwɛ sɛ ɛwɔ hɔ bere nyinaa wɔ dropdown no trigger element no so.

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset="".

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
offset a wɔde hyɛ mu	nɔma \| ahama \| dwumadie	0 na ɛwɔ hɔ	Offset a ɛfa dropdown no ho a ɛfa ne botae ho. Sɛ wɔde dwumadie bi di dwuma de kyerɛ offset no a, wɔfrɛ no a adeɛ bi a ɛwɔ offset data no sɛ ne argument a ɛdi kan. Ɛsɛ sɛ adwuma no san de ade bi a ɛwɔ nhyehyɛe koro no ara ba. Wɔde triggering element DOM node no twam sɛ akyinnyegye a ɛto so abien. Sɛ wopɛ nsɛm pii a hwɛ Popper's offset docs .
dane	boolean ho asɛm	nokorɛ	Ma Dropdown no kwan ma ɛndannan sɛ ɛba sɛ biribi akata so wɔ reference element no so a. Sɛ wopɛ nsɛm pii a hwɛ Popper flip docs .
ɔhye so	ahama \| adeɛ	'scrollƆwofo'.	Overflow anohyeto hye a ɛwɔ dropdown menu no mu. Gye `'viewport'`, `'window'`, `'scrollParent'`, anaa HTMLElement nkyerɛkyerɛmu bi (JavaScript nkutoo) botae ahorow tom. Sɛ wopɛ nsɛm pii a hwɛ Popper preventOverflow docs .
mmoa nwoma	ahama \| adeɛ	'toggle' ho asɛm.	Nkyerɛkyerɛmu element a ɛwɔ dropdown menu no mu. Gye `'toggle'`, `'parent'`, anaa HTMLElement nkyerɛkyerɛmu bi botae ahorow tom. Sɛ wopɛ nsɛm pii a hwɛ Popper's referenceObject docs .
da no adi	ahoma	'nsɛm a ɛyɛ nnam'.	Sɛnea wɔahyɛ no, yɛde Popper di dwuma ma gyinabea a ɛyɛ nnam. Ma eyi nyɛ adwuma wɔ `static`.
popperNhyehyɛe no	null \| adeɛ	ohunu	Sɛ wopɛ sɛ wo sesa Bootstrap no Popper nhyehyeɛ a ɛwɔ hɔ no a, hwɛ Popper nhyehyeɛ

Hyɛ no nsow bere boundarya wɔde ato botae biara a ɛnyɛ 'scrollParent', wɔde ɔkwan position: staticno di dwuma wɔ .dropdownade no so.

Akwan a wɔfa so yɛ

Ɔkwan	Nkyerɛmu
`$().dropdown('toggle')`	Toggles dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.
`$().dropdown('show')`	Kyerɛ dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.
`$().dropdown('hide')`	Hide dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.
`$().dropdown('update')`	Ɔyɛ element bi a ɛwɔ dropdown no gyinabea foforo.
`$().dropdown('dispose')`	Ɔsɛe element bi a ɛwɔ dropdown no.

Nsɛm a esisi

Wɔde dropdown nsɛm a esisi nyinaa tow wɔ .dropdown-menu's awofo element no so na ɛwɔ relatedTargetagyapade, a ne bo yɛ toggling anchor element. hide.bs.dropdownna hidden.bs.dropdownnsɛm a esisi no wɔ clickEventagyapade (bere a mfitiase nsɛm a esisi no su no nkutoo yɛ click) a ɛwɔ Event Object ma click event no.

Dwumadie	Nkyerɛmu
`show.bs.dropdown`	Saa adeyɛ yi tow ntɛm ara bere a wɔfrɛ show instance kwan no.
`shown.bs.dropdown`	Wɔtow saa adeyɛ yi bere a wɔayɛ dropdown no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow, awie).
`hide.bs.dropdown`	Wɔtow saa adeyɛ yi ntɛm ara bere a wɔafrɛ hide instance kwan no.
`hidden.bs.dropdown`	Wɔtow saa adeyɛ yi bere a wɔawie dropdown no a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow, awie).

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

Nneɛma a wɔde gu fam

Nsɛm a Wɔaka abom

Nneɛma a wotumi nya

Nhwɛso ahorow

Bɔton biako pɛ

Split button no mu

Sizing a wɔde yɛ nneɛma

Akwankyerɛ ahorow

Dropup a ɛwɔ hɔ

Dropright a ɛwɔ hɔ

Nsu a ɛtɔ gu fam

Menu mu nneɛma

Asɔ

Dɛmdie

Menu a wɔde hyɛ mu

Mmuae a wɔde hyɛ mu

Menu mu nsɛm

Nsɛmti a wɔde kyerɛw nsɛm

Nneɛma a wɔkyekyɛ mu

Atwerɛ

Nkyerɛwee ahorow

Sɛnea wɔde di dwuma

Via data su ahorow so

Ɛdenam JavaScript so

`data-toggle="dropdown"`wɔda so ara hwehwɛ

Nneɛma a wubetumi apaw

Akwan a wɔfa so yɛ

Nsɛm a esisi

Nneɛma a wɔde gu fam

Nsɛm a Wɔaka abom

Nneɛma a wotumi nya

Nhwɛso ahorow

Bɔton biako pɛ

Split button no mu

Sizing a wɔde yɛ nneɛma

Akwankyerɛ ahorow

Dropup a ɛwɔ hɔ

Dropright a ɛwɔ hɔ

Nsu a ɛtɔ gu fam

Menu mu nneɛma

Asɔ

Dɛmdie

Menu a wɔde hyɛ mu

Mmuae a wɔde hyɛ mu

Menu mu nsɛm

Nsɛmti a wɔde kyerɛw nsɛm

Dropdown asɛmti no

Nneɛma a wɔkyekyɛ mu

Atwerɛ

Nkyerɛwee ahorow

Nneɛma a wobetumi apaw wɔ dropdown so

Sɛnea wɔde di dwuma

Via data su ahorow so

Ɛdenam JavaScript so

data-toggle="dropdown"wɔda so ara hwehwɛ

Nneɛma a wubetumi apaw

Akwan a wɔfa so yɛ

Nsɛm a esisi

`data-toggle="dropdown"`wɔda so ara hwehwɛ