in English

Dagiti dropdown

I-toggle dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan dagiti silpo ken dadduma pay babaen ti Bootstrap dropdown plugin.

Panangkita iti pakabuklan

Dagiti dropdown ket mabalin a mabaliwan, dagiti konteksto a panagkapet para iti panangiparang kadagiti listaan dagiti silpo ken dadduma pay. Naaramid dagitoy nga interaktibo babaen ti nairaman a Bootstrap dropdown JavaScript plugin. Ma-toggle dagitoy babaen ti panag-click, saan a babaen ti panag-hover; daytoy ket nairanta a pangngeddeng iti disenio .

Dagiti dropdown ket naibangon iti maysa a maikatlo a partido a biblioteka, ti Popper , a mangipaay ti dinamiko a panagposision ken panagduktal ti viewport. Siguraduen nga iraman ti popper.min.js sakbay ti JavaScript ti Bootstrap wenno usaren ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper. Ti Popper ket saan a naus-usar a mangiposision kadagiti dropdown kadagiti navbar nupay kasta a kas ti dinamiko a panagposision ket saan a kasapulan.

No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .

Ti pannakagun-od

Ti pagalagadan ti WAI ARIA ket mangikeddeng ti aktual a role="menu"widget , ngem daytoy ket espesipiko kadagiti kasla aplikasion a menu a mangtignay kadagiti panagtignay wenno dagiti panagandar. Dagiti menu ti ARIA ket mabalin laeng nga aglaon kadagiti banag ti menu, dagiti banag ti menu ti kahon ti tsek, dagiti banag ti menu ti buton ti radio, dagiti grupo ti buton ti radio, ken dagiti sub-menu.

Iti sabali a bangir, dagiti dropdown ti Bootstrap ket nadisenio a sapasap ken maipakat kadagiti nadumaduma a kasasaad ken dagiti estruktura ti markup. Kas pagarigan, mabalin ti mangpartuat kadagiti dropdown a naglaon kadagiti kanayonan nga input ken dagiti kontrol ti porma, a kas dagiti tay-ak ti panagbiruk wenno dagiti porma ti panagserrek. Gapu iti daytoy a rason, ti Bootstrap ket saan a mangnamnama (wenno automatiko a manginayon) ti ania man kadagiti roleken dagiti aria-kababalin a kasapulan para kadagiti pudno nga ARIA a menu. Masapul nga iraman dagiti autor dagitoy nga ad-adda nga espesipiko a kababalin a mismo.

Nupay kasta, ti Bootstrap ket mangnayon ti naibangon a suporta para kadagiti kaaduan a pagalagadan a panagtitinnulong ti menu ti teklado, a kas ti abilidad nga aggaraw kadagiti indibidual .dropdown-itemnga elemento babaen ti panagusar kadagiti tulbek ti kursor ken mangiserra ti menu babaen ti ESCtulbek.

Dagiti pagarigan

Balkoten ti toggle ti dropdown (ti buton wenno silpomo) ken ti dropdown menu iti uneg ti .dropdown, wenno sabali nga elemento a mangideklara position: relative;iti . Mabalin a mai-trigger dagiti dropdown manipud <a>wenno <button>dagiti elemento tapno nasaysayaat a maibagay kadagiti mabalin a kasapulam.

Maymaysa a buton

Ania man a single .btnket mabalin a pagbalinen a dropdown toggle nga addaan kadagiti sumagmamano a panagbalbaliw ti markup. Adtoy no kasano a maikabilmo dagitoy nga agtrabaho kadagiti asinoman <button>nga elemento:

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

Ket addaan kadagiti <a>elemento:

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

Ti kasayaatan a paset ket mabalinmo nga aramiden daytoy iti ania man a buton a variant, met:

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

Kasta met, mangpartuat kadagiti nabingay a buton a dropdown nga addaan iti gangani a kapada a marka a kas dagiti agmaymaysa a buton a dropdown, ngem addaan ti pannakainayon ti .dropdown-toggle-splitpara iti umno a panagsisina iti aglawlaw ti dropdown a caret.

Usarenmi daytoy nga ekstra a klase tapno mapabassit ti horizontal paddingiti agsumbangir a sikigan ti caret iti 25% ken ikkaten ti margin-leftthat's added para kadagiti regular a button dropdown. Dagita nga ekstra a panagbalbaliw pagtalinaedenda a naisentro ti caret iti split button ken mangipaay iti ad-adda a maitutop ti kadakkelna a lugar a maidungpar iti abay ti kangrunaan a buton.

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

Panag-sizing

Dagiti buton a dropdown ket agtrabaho kadagiti buton ti amin a kadakkel, a mairaman dagiti default ken split a dropdown a buton.

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

Dagiti Direksion

Dropup nga

Mangtignay kadagiti dropdown a menu iti ngato dagiti elemento babaen ti pananginayon .dropupiti nagannak nga elemento.

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

Mangtignay kadagiti dropdown a menu iti kannawan dagiti elemento babaen ti pananginayon .droprightiti nagannak nga elemento.

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

Dropleft nga

Mangtignay kadagiti dropdown a menu iti kannigid dagiti elemento babaen ti pananginayon .dropleftiti nagannak nga elemento.

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

Iti pakasaritaan dagiti linaon ti dropdown a menu ket masapul a dagiti silpo, ngem saanen a kasta ti kaso ti v4. Ita mabalinmo nga opsional nga usaren <button>dagiti elemento kadagiti dropdown-mo imbes a ti laeng <a>s.

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

Mabalinmo pay ti mangpartuat kadagiti saan nga interaktibo a dropdown a banag babaen ti .dropdown-item-text. Mariknam a nawaya nga estilo nga ad-adda pay babaen dagiti kostumbre a CSS wenno dagiti utilidad ti teksto.

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

Aktibo

Inayon .activekadagiti banag iti dropdown tapno estilo dagitoy a kas aktibo .

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

Awanan ti kabaelan

Inayon .disabledkadagiti banag iti dropdown tapno estilo dagitoy a kas baldado .

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

Babaen ti default, ti maysa a dropdown a menu ket automatiko a naiposision iti 100% manipud iti ngato ken iti kannigid a sikigan ti nagannakna. Inayon .dropdown-menu-rightiti a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu.

Ulo nga agpangato! Dagiti dropdown ket naiposision gapu iti Popper (malaksid no adda dagitoy iti 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>

Responsibo a panagtunos

No kayatmo nga usaren ti sumungbat a panagtunos, balbaliwan ti dinamiko a panagposision babaen ti pananginayon ti data-display="static"attribute ken usarem dagiti sungbat a klase ti panagduduma.

Tapno maitunos iti kannawan ti dropdown menu iti naited a breakpoint wenno dakdakkel, inayon ti .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>

Tapno maitunos ti kannigid a dropdown menu iti naited a breakpoint wenno dakdakkel, inayon .dropdown-menu-rightken .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>

Imutektekanyo a saanmo a kasapulan ti manginayon ti data-display="static"attribute kadagiti dropdown a buton kadagiti navbar, gapu ta ti Popper ket saan a maus-usar kadagiti navbar.

Dagiti ulo

Manginayon ti ulo a mangimarka kadagiti benneg dagiti tignay iti ania man a dropdown a menu.

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

Dagiti Mangbingaybingay

Pagsisinaen dagiti grupo dagiti mainaig a banag ti menu babaen ti divider.

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

Teksto

Ikabil ti ania man a nawaya a porma a teksto iti uneg ti dropdown a menu nga addaan iti teksto ken agusar kadagiti utilidad ti panagsisina . Imutektekanyo a kasapulam la ketdi dagiti kanayonan nga estilo ti panagdakkel tapno malapdan ti kalawa ti menu.

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

Dagiti Pormas

Mangikabilka iti porma iti uneg ti dropdown menu, wenno aramidem dayta a dropdown menu, ken agusarka kadagiti margin wenno padding utilities tapno maitedmo iti negatibo nga espasio a kasapulam.

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

Usaren ti data-offsetwenno data-referencetapno baliwan ti lokasion ti dropdown.

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

Panagusar

Babaen dagiti attribute ti datos wenno JavaScript, ti dropdown a plugin ket mangbalbaliw ti nailemmeng a linaon (dagiti dropdown a menu) babaen ti panangibaliw ti .showklase iti nagannak .dropdown-menu. Ti data-toggle="dropdown"attribute ket agpannuray para iti panagserra kadagiti dropdown a menu iti maysa a lebel ti aplikasion, isu a nasayaat nga ideya a kanayon nga usaren daytoy.

Kadagiti touch-enabled nga alikamen, ti pananglukat iti dropdown ket manginayon kadagiti empty ( $.noop) mouseoverhandler kadagiti dagus nga annak ti <body>elemento. Daytoy nga aminen a naalas a hack ket kasapulan tapno agtrabaho iti aglawlaw ti maysa a quirk iti iOS’ event delegation , a no saan ket manglapped iti maysa a tap iti sadinoman iti ruar ti dropdown manipud iti panangtignay iti kodigo a mangiserra iti dropdown. Apaman a naserraan ti dropdown, mouseovermaikkat dagitoy a kanayonan nga empty handler.

Babaen kadagiti attribute ti datos

Inayon data-toggle="dropdown"iti link wenno buton tapno mai-toggle ti dropdown.

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

Babaen ti JavaScript

Tawagan dagiti dropdown babaen ti JavaScript:

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

`data-toggle="dropdown"`kasapulan pay laeng

Uray no awagam ti dropdownmo babaen ti JavaScript wenno imbes ketdi usarem ti data-api, data-toggle="dropdown"ket kanayon a kasapulan nga adda iti trigger element ti dropdown.

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset="".

Nagan	Tipo	Default	Panangiladawan
offset nga	numero \| kuerdas nga \| amad	0 nga	Offset ti dropdown relatibo iti targetna. No ti maysa a panagandar ket maus-usar a mangikeddeng ti offset, daytoy ket maawagan babaen ti maysa a banag a naglaon ti datos ti offset a kas ti umuna nga argumentona. Ti function ket masapul nga isublina ti maysa a banag nga addaan iti isu met laeng nga estruktura. Ti mangtignay nga elemento a DOM a nodo ket maipasa a kas ti maikadua nga argumento. Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ni Popper .
ibaliktad	boolean nga	agpayso	Bay-an ti Dropdown nga ag-flip no adda panagtuon iti reperensia nga elemento. Para iti ad-adu pay nga impormasion kitaen dagiti flip docs ni Popper .
beddeng ti pagbeddengan	kuerdas nga \| elemento	'ag-scrollParent'.	Beddeng ti limitasion ti panaglablabes ti dropdown a menu. Awaten dagiti pateg ti `'viewport'`, `'window'`, `'scrollParent'`, wenno ti reperensia ti HTMLElement (JavaScript laeng). Para iti ad-adu pay nga impormasion kitaen dagiti dokumento ti preventOverflow ti Popper .
reperensia	kuerdas nga \| elemento	'ag-toggle'.	Reperensia nga elemento ti dropdown menu. Awaten dagiti pateg ti `'toggle'`, `'parent'`, wenno ti reperensia ti HTMLElement. Para iti ad-adu nga impormasion kitaen ti referenceObject docs ni Popper .
ipakita	kuerdas	'dinamiko'.	Babaen ti default, usarenmi ti Popper para iti dinamiko a panagposision. Ibaldado daytoy babaen ti `static`.
popperKonfig	null nga \| banag	nawaswas	Tapno baliwan ti default a Popper a konfigurasion ti Bootstrap, kitaen ti panagisaad ti Popper

Imutektekanyo no boundarynaikeddeng iti ania man a pateg malaksid ti 'scrollParent', ti estilo position: staticket maipakat iti .dropdownpagkargaan.

Dagiti Pamay-an

Wagas	Panangiladawan
`$().dropdown('toggle')`	I-toggle ti dropdown menu ti naited a navbar wenno tabbed navigation.
`$().dropdown('show')`	Ipakita ti dropdown menu ti naited a navbar wenno tabbed navigation.
`$().dropdown('hide')`	Ilemmeng ti dropdown menu ti naited a navbar wenno tabbed navigation.
`$().dropdown('update')`	Ipabaro ti posision ti dropdown ti maysa nga elemento.
`$().dropdown('dispose')`	Dadaelenna ti dropdown ti maysa nga elemento.

Dagiti Pasamak

Amin a dropdown a pasamak ket maipaputok iti .dropdown-menunagannak nga elemento ti ' ken addaan iti relatedTargettagikua, a ti pategna ket ti agbalbaliw nga elemento ti angkla. hide.bs.dropdownken hidden.bs.dropdowndagiti pasamak ket addaan iti clickEventtagikua (no laeng ti orihinal a kita ti pasamak ket click) a naglaon ti Bagay ti Pasamak para iti pasamak ti panagpidut.

Pasamak	Panangiladawan
`show.bs.dropdown`	Daytoy a pasamak ket agputok a dagus no ti pamay-an ti show instance ket maawagan.
`shown.bs.dropdown`	Daytoy a pasamak ket mapaputok no ti dropdown ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto).
`hide.bs.dropdown`	Daytoy a pasamak ket dagus a mapaputok no ti pamay-an ti panaglemmeng ti pagarigan ket naawagan.
`hidden.bs.dropdown`	Daytoy a pasamak ket mapaputok no ti dropdown ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto).

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

Dagiti dropdown

Panangkita iti pakabuklan

Ti pannakagun-od

Dagiti pagarigan

Maymaysa a buton

Split ti buton

Panag-sizing

Dagiti Direksion

Dropup nga

Dropright nga

Dropleft nga

Dagiti banag iti menu

Aktibo

Awanan ti kabaelan

Panagtunos ti menu

Responsibo a panagtunos

Linaon ti menu

Dagiti ulo

Dagiti Mangbingaybingay

Teksto

Dagiti Pormas

Panagusar

Babaen kadagiti attribute ti datos

Babaen ti JavaScript

`data-toggle="dropdown"`kasapulan pay laeng

Dagiti Pagpilian

Dagiti Pamay-an

Dagiti Pasamak

Dagiti dropdown

Panangkita iti pakabuklan

Ti pannakagun-od

Dagiti pagarigan

Maymaysa a buton

Split ti buton

Panag-sizing

Dagiti Direksion

Dropup nga

Dropright nga

Dropleft nga

Dagiti banag iti menu

Aktibo

Awanan ti kabaelan

Panagtunos ti menu

Responsibo a panagtunos

Linaon ti menu

Dagiti ulo

Dropdown nga ulo

Dagiti Mangbingaybingay

Teksto

Dagiti Pormas

Dagiti pagpilian iti dropdown

Panagusar

Babaen kadagiti attribute ti datos

Babaen ti JavaScript

data-toggle="dropdown"kasapulan pay laeng

Dagiti Pagpilian

Dagiti Pamay-an

Dagiti Pasamak

`data-toggle="dropdown"`kasapulan pay laeng