Hoos u dhac

Beddel dulsaarka macnaha guud si aad u muujiso liisaska isku xidhka iyo in ka badan oo leh Bootstrap-ka hoos u dhaca.

Dulmar

Hoosudhaca waa la rogi karaa, dulsaar macnaha guud ee muujinta liisaska isku xirka iyo wax ka badan. Waxa lagu sameeyay is dhexgal oo ay ku jiraan Bootstrap dropdown JavaScript plugin. Waxay ku rogaan gujisyada, ma aha inay dul heehaabayaan; kani waa go'aan naqshadayn ula kac ah .

Hoosudhaca waxaa lagu dhisay maktabad qolo saddexaad, Popper.js , taas oo bixisa meelayn firfircoon iyo ogaanshaha aragtida. Hubi inaad ku darto popper.min.js ka hor Bootstrap's JavaScript ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper.js. Popper.js looma isticmaalo in lagu dhigo hoos-u-dhacyada navbar-yada inkasta oo meelaynta firfircooni aan loo baahnayn.

Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .

Helitaanka

Halbeegga WAI ARIA waxa uu qeexayaa role="menu"widget -ka dhabta ah , laakiin kani waxa uu gaar u yahay menu-yada codsiga u eg ee kiciya falalka ama hawlaha. Liiska ARIA waxa ka koobnaan kara oo keliya shayada menu-ka, shayga liiska sanduuqa, shayada badhanka raadiyaha, kooxaha badhanka raadiyaha, iyo menus-hoosaadka.

Bootstrap's dropdowns, dhanka kale, waxaa loo qaabeeyey inay noqdaan kuwo guud oo lagu dabaqi karo xaalado kala duwan iyo qaab-dhismeedka calaamadaynta. Tusaale ahaan, waxa suurtagal ah in la abuuro hoos u dhacyo ka kooban waxyaabo dheeraad ah iyo kontaroolada qaabaynta, sida goobaha wax laga raadiyo ama foomamka gelitaanka. Sababtan awgeed, Bootstrap ma filayo (ama si toos ah ugu darin) mid ka mid ah roleiyo aria-sifooyinka looga baahan yahay liiska ARIA ee runta ah. Qorayaashu waa inay ku daraan sifooyin gaar ah laftooda.

Si kastaba ha ahaatee, Bootstrap wuxuu ku daraa taageerada gudaha inta badan isdhexgalka menu-ka caadiga ah ee kiiboodhka, sida awoodda lagu dhex maro .dropdown-itemwalxaha shakhsi ahaaneed iyadoo la adeegsanayo furayaasha cursorka oo ku xidh liiska ESCfuraha.

Tusaalooyinka

Isku duub beddelka hoos u dhaca (badhankaaga ama xidhiidhka) iyo liiska hoos u dhaca ee gudaha .dropdown, ama shay kale oo sheegaya position: relative;. Hoos-u-dhac ayaa laga kicin karaa <a>ama <button>canaasiirta si ay si fiican ugu habboonaato baahiyahaaga suurtagalka ah.

Hal badhan

Mid kasta .btnwaxa loo rogi karaa beddelka hoos u dhaca oo leh waxoogaa isbeddello ah. Waa kuwan sida aad uga dhigi karto inay ku shaqeeyaan labada <button>shay:

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

Iyo <a>curiyayaasha:

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

Qaybta ugu fiican ayaa ah inaad tan ku samayn karto badhan kasta oo kala duwan, sidoo kale:

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

Badhan kala jeex

Sidoo kale, samee badhanka kala qaybsan ee hoos u dhaca oo leh wax la mid ah kuwa hoos u dhaca badhanka, laakiin lagu daro .dropdown-toggle-splitkala dheeraynta saxda ah ee ku wareegsan daryeelka hoos u dhaca.

Waxaan u isticmaalnaa fasalkan dheeraadka ah si aan u dhimno jiifka paddinglabada dhinac ee daryeelka 25% oo aan ka saarno margin-leftwaxa lagu daray hoos u dhigista badhanka caadiga ah. Isbeddelladaas dheeriga ah waxay xannaanada ku hayaan badhanka kala qaybsan waxayna bixiyaan meel si habboon u cabbiran oo ku dheggan badhanka weyn.

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

Cabbirka

Hoos-u-dhacyada badhanka waxay la shaqeeyaan badhamada cabbirrada oo dhan, oo ay ku jiraan kuwa caadiga ah iyo badhamada hoos u dhaca.

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

Tilmaamaha

Tuur

Kici liiska hoos-u-dhaca ee ka sarreeya walxaha adigoo ku daraya .dropupxubinta waalidka.

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

Kici liiska hoos-u-dhaca ee dhinaca midigta ee curiyeyaasha adoo ku daraya .droprightxubinta waalidka.

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

Hoos u dhac

Kici liiska hoos-u-dhaca ee bidixda curiyayaasha adoo ku daraya .dropleftxubinta waalidka.

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

Taariikh ahaan liiska liiska hoos u dhigida waxa ku jira waa inay ahaadaan xiriiriyayaal, laakiin taasi hadda maahan kiiska v4. Hadda waxaad si ikhtiyaari ah u isticmaali kartaa <button>walxaha hoos u dhacaaga halkii aad ka isticmaali lahayd <a>s.

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

Waxa kale oo aad ku abuuri kartaa waxyaabaha hoos u dhaca ee aan is dhexgal ahayn .dropdown-item-text. Dareen xor u ah in aad ku sii habayso CSS caadadii ama adeegaha qoraalka.

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

Firfircoon

Ku dar .activeshayada hoos u dhaca si aad u habayso inay yihiin kuwo firfircoon .

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

Naafada

Ku dar .disabledshayada hoos u dhaca si aad u qaabeeyaan sida naafada

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

Sida caadiga ah, liiska hoos u dhaca waxa si toos ah loo dhigayaa 100% xagga sare iyo dhinaca bidix ee waalidkiisa. Ku dar .dropdown-menu-righta .dropdown-menuto midig toosi liiska hoos u dhaca.

Madaxa kor u qaad! Hoos-u-dhacyada waxaa la dhigay mahadsanid Popper.js (marka laga reebo marka ay ku jiraan 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>

Isku toosin jawaab celin ah

Haddii aad rabto inaad isticmaasho toosinta jawaabta, dami meelaynta firfircoon adiga oo ku daraya data-display="static"sifada oo isticmaal fasallada kala duwanaanshaha jawaabaha.

Si aad toos ugu toosiso liiska hoos u dhaca ee bar goynta la siiyay ama ka weyn, ku dar .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>

Si loo waafajiyo liiska hoos-u-dhaca bidix ee meesha la bixiyay ama ka weyn, ku dar .dropdown-menu-rightoo .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>

Ogsoonow inaadan u baahnayn inaad data-display="static"sifo ku darto badhanka hoos u dhaca ee navbars, maadaama Popper.js aan loo isticmaalin navbars.

Madax

Ku dar madax si aad u calaamadiso qaybaha ficillada ee liiska hoos u dhaca.

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

Qaybiyayaal

Kala saar kooxo kala duwan oo ah shayada liiska laxidhiidha oo leh qaybiye.

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

Qoraal

Dhig qoraal kasta oo qaab bilaash ah gudaha liiska hoos-u-dhaca oo leh qoraal isticmaalna utility kala dheereynta . Ogsoonow inaad u badan tahay inaad u baahan doonto qaabab cabbir oo dheeri ah si aad u xaddiddo ballaca menu-ka.

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

Foomamka

Geli foom gudaha liiska hoos u dhaca, ama ka samee liiska hoos u dhaca, oo isticmaal margin ama padding utilities si aad u siiso booska taban ee aad u baahan tahay.

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

Isticmaal data-offsetama data-referenceaad bedesho goobta hoos u dhigista

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

Isticmaalka

Iyada oo loo marayo sifooyinka xogta ama JavaScript, plugin-ka hoos-u-dhaca wuxuu beddelaa nuxurka qarsoon (menus-ka-soo-celinta) isagoo beddelaya .showfasalka shayga liiska waalidka. Sifada data-toggle="dropdown"waxay ku tiirsan tahay xidhitaanka liiska hoos u dhaca ee heerka codsiga, markaa waa fikrad wanaagsan in had iyo jeer la isticmaalo.

Aaladaha la taabto, furista hoos u dhaca waxay ku dartaa maareeyayaal madhan ( $.noop) mouseoverubadka <body>curiyaha ah. Tani waxay qirtay jabsiga fool xun waa lagama maarmaan in ay ka shaqeeyaan agagaarka quirk ah ee iOS' waftiga dhacdo , taas oo haddii kale ka hortagi lahaa tuubada meel kasta oo ka baxsan hoos-u-dhicidda ka kiciya code in xidho hoos u dhaca ah. Marka hoos u dhigista la xiro, kuwan dheeraadka ah mouseoveree gacanta ku haya waa la saarayaa.

Iyada oo loo marayo sifooyinka xogta

Ku dar data-toggle="dropdown"xiriiriye ama badhan si aad u beddesho hoos u dhaca.

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

Iyadoo loo marayo JavaScript

Hoos ka wac JavaScript:

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

`data-toggle="dropdown"`weli loo baahan yahay

Iyadoo aan loo eegin haddii aad ugu wacdo hoos u dhigistaada JavaScript ama aad isticmaasho xogta-api, data-toggle="dropdown"had iyo jeer waxaa looga baahan yahay inaad ku jirto qaybta kicinta ee hoos u dhaca.

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset="".

Magaca	Nooca	Asal ahaan	Sharaxaada
dhimis	lambarka \| xadhig \| shaqayn	0	Deminta hoos u dhaca marka loo eego bartilmaameedkiisa. Marka shaqada loo isticmaalo in lagu go'aamiyo dhimista, waxaa loogu yeeraa shay ay ku jiraan xogta ka-dhaafka ah sida dooddeeda koowaad. Shaqadu waa in ay soo celisaa shay leh qaab isku mid ah. Xubinta kicinta ee DOM node waxa loo gudbiyaa sidii doodda labaad. Wixii macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper.js .
rogo	booliyan	run	Oggolow hoos u dhigida inuu rogo haddii ay dhacdo in ay is dul saaran yihiin qaybta tixraaca. Wixii macluumaad dheeraad ah ka eeg dukumeentiyada rogroga ee Popper.js .
xuduud	xadhig \| curiye	'waalidiinta'	Xadka xad-dhaafka ah ee xaddidaadda liiska hoos u dhaca. Aqbala qiyamka `'viewport'`, `'window'`, `'scrollParent'`, ama tixraaca HTMLElement (JavaScript kaliya). Macluumaad intaas ka badan ka eeg dukumeentiyada Popper.js ee ka hortagga qulqulka .
tixraac	xadhig \| curiye	'rogid'	Cunsurka tixraaca ee liiska hoos u dhaca. Aqbala qiyamka `'toggle'`, `'parent'`, ama tixraaca HTMLElement. Macluumaad intaas ka badan ka eeg dukumeentiyada Popper.js ee tixraacaObject .
bandhig	xadhig	'firfircoon'	Sida caadiga ah, waxaan u isticmaalnaa Popper.js meelaynta firfircoon. Ku dami tan `static`.
popperConfig	waxba \| walax	waxba	Si aad u bedesho Bootstrap's default Popper.js config, arag qaabka Popper.js

Ogow marka boundarylagu dejiyo qiimo kasta oo aan ahayn 'scrollParent', qaabka position: staticwaxa lagu dabaqayaa .dropdownweelka.

Hababka

Habka	Sharaxaada
`$().dropdown('toggle')`	Wuxuu rogaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.
`$().dropdown('show')`	Wuxuu muujiyaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.
`$().dropdown('hide')`	Wuxuu qariyaa liiska hoos u dhaca ee navbar la bixiyay ama navigation tab.
`$().dropdown('update')`	Waxay cusboonaysiisaa booska hoos u dhaca curiyaha
`$().dropdown('dispose')`	Wuxuu baabi'iyaa hoos u dhaca curiyaha.

Dhacdooyinka

Dhammaan dhacdooyinka hoos u dhaca waxaa lagu eryaa xubinta .dropdown-menuwaalidka waxayna leeyihiin relatedTargethanti, qiimihiisu waa curiyaha barroosinka roganaya. hide.bs.dropdowniyo hidden.bs.dropdowndhacdooyinku waxay leeyihiin clickEventhanti (kaliya marka nooca dhacdada asalka ah uu yahay click) oo ka kooban shayga Dhacdada ee dhacdada gujinta.

Dhacdo	Sharaxaada
`show.bs.dropdown`	Dhacdadani waxay isla markiiba gubtaa marka habka tusaalaha bandhigga la yiraahdo.
`shown.bs.dropdown`	Dhacdadan ayaa la eryaa marka hoos u dhigista laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa kala-guurka CSS, si loo dhamaystiro).
`hide.bs.dropdown`	Dhacdadan ayaa isla markiiba la eryaa marka habka dhuumashada la waco.
`hidden.bs.dropdown`	Dhacdadan waxa la eryaa marka ay dhammaato hoos u dhigista laga qarinayo isticmaalaha (waxa ay sugi doontaa kala-guurka CSS, si loo dhamaystiro).

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

Hoos u dhac

Dulmar

Helitaanka

Tusaalooyinka

Hal badhan

Badhan kala jeex

Cabbirka

Tilmaamaha

Tuur

Dropright

Hoos u dhac

Shayada liiska

Firfircoon

Naafada

Isku toosinta menu

Isku toosin jawaab celin ah

Nuxurka liiska

Madax

Qaybiyayaal

Qoraal

Foomamka

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Iyadoo loo marayo JavaScript

`data-toggle="dropdown"`weli loo baahan yahay

Ikhtiyaarada

Hababka

Dhacdooyinka

Hoos u dhac

Dulmar

Helitaanka

Tusaalooyinka

Hal badhan

Badhan kala jeex

Cabbirka

Tilmaamaha

Tuur

Dropright

Hoos u dhac

Shayada liiska

Firfircoon

Naafada

Isku toosinta menu

Isku toosin jawaab celin ah

Nuxurka liiska

Madax

Madaxa hoos u dhaca

Qaybiyayaal

Qoraal

Foomamka

Doorashooyinka hoos u dhaca

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Iyadoo loo marayo JavaScript

data-toggle="dropdown"weli loo baahan yahay

Ikhtiyaarada

Hababka

Dhacdooyinka

`data-toggle="dropdown"`weli loo baahan yahay