Source

Ba dropdowns ya kokita

Bobongola ba superpositions contextuelles mpo na kolakisa ba liste ya ba liens mpe mingi na plugin ya kokita ya Bootstrap.

Botali ya mozindo

Ba dropdowns ezali toggleable, ba overlays contextuels mpo na kolakisa ba liste ya ba liens mpe mingi mosusu. Bazali kosala interactive na plugin ya JavaScript oyo ezali kokita ya Bootstrap oyo ezali na kati. Bazali ko toggled na ko cliquer, na ko hover te; oyo ezali ekateli ya kosala na mokano .

Ba dropdowns etongami na bibliothèque ya troisième partie, Popper.js , oyo epesaka positionnement dynamique mpe détection ya port de vue. Sala makasi otia popper.min.js liboso ya JavaScript ya Bootstrap to salela bootstrap.bundle.min.js/ bootstrap.bundle.jsoyo ezali na Popper.js. Popper.js esalelamaka te mpo na ko positionner ba dropdowns na ba navbars atako lokola positionnement dynamique esengeli te.

Soki ozali kotonga JavaScript na biso uta na source, esengiutil.js .

Kozala na makoki ya kozwa yango

Norme WAI ARIA elimboli role="menu"widget ya solo , kasi oyo ezali ya sikisiki na ba menu lokola ya bosaleli oyo ebandisaka misala to misala. Ba menu ya ARIA ekoki kozala kaka na biloko ya menu, biloko ya menu ya case ya kotiya elembo, biloko ya menu ya bouton ya radio, bituluku ya bouton ya radio, mpe ba sous-menu.

Ba dropdowns ya Bootstrap, na ngambo mosusu, esalemi mpo na kozala générique mpe ekoki kosalelama na ba situations ndenge na ndenge mpe na ba structures ya marquage. Na ndakisa, ezali na nzela ya kosala ba dropdowns oyo ezali na ba entrées ya kobakisa mpe ba contrôles ya formulaire, lokola ba champs ya recherche to ba formulaires ya login. Mpo na ntina oyo, Bootstrap ezali kozela te (to kobakisa na ndenge ya automatique) moko ya rolempe aria-bizaleli oyo esengeli mpo na ba menu ya solosolo ya ARIA . Bakomi bakosengela kokɔtisa bango moko bizaleli wana ya sikisiki mingi.

Kasi, Bootstrap ebakisi lisungi oyo etongami na kati mpo na mingi ya boyokani ya menu ya klaviatware ya momesano, lokola makoki ya kotambola na kati ya .dropdown-itembiloko mokomoko na kosaleláká bafungola ya kursɛrɛ mpe kokanga menu na ESCfungola.

Bandakisa

Envelopper toggle ya dropdown (bouton to lien na yo) mpe menu ya dropdown na kati ya .dropdown, to élément mosusu oyo esakoli position: relative;. Ba dropdowns ekoki kozala déclenché à partir ya <a>to <button>ba éléments mpo na ko correspondre malamu na ba besoins na yo potentiels.

Bouton moko

Single nyonso .btnekoki kobongwana na toggle ya kokita na mwa mbongwana ya bilembo. Tala ndenge okoki kotia bango na mosala na ba <button>éléments moko to mosusu:

Action Another action Something else here 
<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>

Mpe na <a>biloko oyo:

Action Another action Something else here 
<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>

Eteni ya malamu ezali ete okoki kosala yango na variante nyonso ya bouton, mpe:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Bouton ya kokabola

Ndenge moko mpe, sala ba dropdowns ya bouton split na marque presque moko na ba dropdowns ya bouton moko, kasi na kobakisa ya .dropdown-toggle-splitmpo na espacement malamu zingazinga ya caret ya dropdown.

Tosalelaka kelasi oyo ya likolo mpo na kokitisa horizontal paddingna ngambo nyonso mibale ya caret na 25% mpe kolongola margin-leftoyo ebakisami mpo na ba déroulants ya bouton ya mbala na mbala. Mbongwana wana ya kobakisa ebatelaka caret na katikati na bouton ya kokabola mpe epesaka esika ya kobɛta oyo ezali na bonene oyo ebongi mpenza pembeni ya bouton monene.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Kosala bonene ya biloko

Ba boutons oyo ezali kokita esalaka na ba boutons ya bonene nyonso, bakisa mpe ba boutons oyo ezali kokita mpe oyo ekabwani.

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

Ndenge ya kosala

Kobwaka na nse

Déclenchez ba menu déroulant likolo ya ba éléments na kobakisa .dropupna élément parent.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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 ya kokita

Déclenchez ba menu déroulant na droite ya ba éléments na kobakisa .droprightna élément parent.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Kobwaka mai

Déclenchez ba menu déroulant na gauche ya ba éléments na kobakisa .dropleftna élément parent.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Historiquement ba contenus ya menu déroulant esengelaki ezala ba liens, mais ezali lisusu bongo te na v4. Sikoyo okoki kosalela optionnellement ba <button>éléments na ba dropdowns na yo au lieu ya kaka <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>

Okoki mpe kosala biloko ya kokita oyo ezali na boyokani te na .dropdown-item-text. Bozala na bonsomi ya kosala style lisusu na ba utilitaires ya CSS to ya texte personnalisé.

Mokanda ya eloko oyo ezali kokita Mosala Mosala mosusu Eloko mosusu awa 
<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>

Esalaka

Bakisa .activena biloko oyo ezali na dropdown mpo na kosala style na yango lokola active .

Lien ya mbala na mbala Lien actif Lien mosusu 
<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>

Bakanga

Bakisa .disabledna biloko na dropdown mpo na kosala style na yango lokola désactivé .

Lien ya mbala na mbala Lien oyo ekangami Lien mosusu 
<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>

Na ndenge ya libela, menu oyo ezali kokita ezali kotyama automatiquement 100% kobanda na likoló mpe na ngámbo ya lobɔkɔ ya mwasi ya moboti na yango. Bakisa .dropdown-menu-rightna a .dropdown-menuna droite aligner menu oyo ezali kokita.

Mitó likoló! Ba dropdowns e positionné grâce na Popper.js (sauf soki ezali na kati ya 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>

Alignment oyo ezo répondre

Soki olingi kosalela alignment responsive, désactiver positionnement dynamique na kobakisa data-display="static"attribut mpe salela ba classes ya variation responsive.

Mpo na kosala boyokani na lobɔkɔ ya mobali na menu oyo ezali kokita na esika oyo bapesi to oyo eleki monene, bakisá .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>

Mpo na kosala ete menu oyo ezali kokita na lobɔkɔ ya mwasi na esika oyo bapesi to oyo eleki monene, bakisa .dropdown-menu-rightmpe .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>

Yeba ete osengeli te kobakisa data-display="static"attribut na ba boutons ya kokita na ba navbars, lokola Popper.js esalelamaka te na ba navbars.

Makambo oyo ezali na menu

Mitó ya makambo

Bakisa motó mpo na kotya bilembo na biteni ya misala na menu nyonso oyo ezali kokita.

Motó ya likambo oyo ezali kokita
Mosala Mosala mosusu 
<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>

Bato oyo bakabolaka

Kabola bituluku ya biloko ya menu oyo ezali na boyokani na yango na nzela ya kokabola.

Mosala Mosala mosusu Eloko mosusu awa
Lien oyo ekabwani 
<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>

Nkoma

Tia makomi nyonso ya forme libre na kati ya menu ya kokita na makomi mpe salelá ba utilitaires ya esika ya kofanda . Yebá ete okozala mbala mosusu na mposa ya mitindo mosusu ya kopesa bonene mpo na kopekisa bonene ya menu.

Mokanda moko ya ndakisa oyo ezali koleka na bonsomi na kati ya menu oyo ezali kokita.

Mpe oyo ezali makomi ya ndakisa mingi koleka.

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

Baformilɛrɛ

Tia formulaire moko na kati ya menu oyo ezali kokita, to sala yango na menu oyo ezali kokita, mpe salelá ba utilitaires ya marge to ya padding mpo na kopesa yango esika ya mabe oyo osengeli na yango.

Ya sika zingazinga awa? Bokomisa nkombo Obosani mot de passe? 
<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>

Salelá data-offsetto data-referencempo na kobongola esika oyo ezali kokita.

Action Another action Something else here
Action Another action Something else here
Separated link 
<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>

Kosalela yango

Na nzela ya ba attributs ya ba données to JavaScript, plugin oyo ezali kokita ebalusaka makambo oyo ebombami (ba menu oyo ezali kokita) na kobongola .showkelasi na eloko ya liste ya baboti. Attribut data-toggle="dropdown"etie motema mpo na kokanga ba menu ya kokita na niveau ya application, yango wana ezali likanisi malamu kosalela yango ntango nyonso.

Na ba appareils oyo ekoki ko toucher, kofungola dropdown ebakisi ba handlers ya pamba ( $.noop) na bana ya mbala moko ya élément. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , oyo soki te elingaki kopekisa robinet esika nyonso libanda ya dropdown e déclencher code oyo ekanga dropdown. Soki kaka dropdown ekangami, ba handlers oyo ya pamba ya kobakisa elongolamaka.mouseover<body>mouseover

Na nzela ya ba attributs ya ba données

Bakisa data-toggle="dropdown"na lien to na bouton mpo na kobongola esika oyo ezali kokita.

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

Na nzela ya JavaScript

Benga ba dropdowns na nzela ya JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"esɛngami naino

Indépendamment soki obengi dropdown na yo na nzela ya JavaScript to na esika na yango kosalela data-api, data-toggle="dropdown"esengeli ntango nyonso kozala présent na élément déclencheur ya dropdown.

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-offset="".

Nkombo Lolenge Mbeba Ndimbola
offset ya kosala motango | molongo ya molongo | mosala 0.

Offset ya dropdown par rapport na cible na yango.

Tango fonction esalelami pona koyeba offset, ebengami na objet oyo ezali na ba données ya offset lokola argument na yango ya liboso. Fonction esengeli kozongisa eloko oyo ezali na structure moko. Node DOM ya élément déclencheur eleki lokola argument ya mibale.

Mpo na koyeba makambo mingi tala Docs ya offset ya Popper.js .
kobalusa boolean ya solo Tika Dropdown ebalusa na cas ya superposition na élément ya référence. Mpo na koyeba makambo mingi tala na flip docs ya Popper.js .
ndelo ya mboka molongo ya molongo | eloko 'moboti ya défilement'. Frontière ya contrainte ya débordement ya menu oyo ezali kokita. Endimi motuya ya 'viewport', 'window', 'scrollParent', to référence ya HTMLElement (JavaScript kaka). Mpo na koyeba makambo mingi tala ba docs ya preventOverflow ya Popper.js .
referansi molongo ya molongo | eloko 'toggle'. Elemento ya référence ya menu oyo ezali kokita. Endimi motuya ya 'toggle', 'parent', to référence ya HTMLElement. Mpo na koyeba makambo mingi tala Docs ya referenceObject ya Popper.js .
kolakisa shene 'dynamique'. Par défaut, tosalelaka Popper.js pona positionnement dynamique. Désactiver oyo na static.
popperConfig ya kosala null | moto ya likambo ntina te Mpo na kobongola config ya Popper.js ya liboso ya Bootstrap, tala configuration ya Popper.js

Yeba ntango boundaryetiamaki na motuya mosusu longola se 'scrollParent', lolenge position: staticesalelami na eloko ya .dropdownkobomba.

Ba méthodes ya kosala

Metode Ndimbola
$().dropdown('toggle') Ezali kobongola menu oyo ezali kokita ya navbar to navigation oyo ezali na onglet oyo epesami.
$().dropdown('show') Ezali kolakisa menu oyo ezali kokita ya navbar to navigation oyo ezali na onglet oyo epesami.
$().dropdown('hide') Ebombaka menu oyo ezali kokita ya navbar to navigation oyo ezali na onglet oyo epesami.
$().dropdown('update') Ezali kosala mikolo oyo position ya dropdown ya élément moko.
$().dropdown('dispose') Ebebisaka dropdown ya élément moko.

Makambo oyo esalemaki

Ba événements nionso ya dropdown ezo betama na .dropdown-menuélément parent ya 's pe eza na relatedTargetpropriété, oyo valeur na yango eza élément anchor toggling. hide.bs.dropdownmpe hidden.bs.dropdownmakambo ezali na clickEventbozwi (kaka ntango lolenge ya likambo ya ebandeli ezali click) oyo ezali na Objet ya Likambo mpo na likambo ya kofina.

Likambo Ndimbola
show.bs.dropdown Evenement oyo ezo beta mbala moko tango méthode ya instance ya kolakisa ebengami.
shown.bs.dropdown Evenement oyo ezo beta tango dropdown esalemi komonana na mosaleli (ekozela ba transitions ya CSS, mpo esila).
hide.bs.dropdown Evenement oyo ezo beta mbala moko tango méthode ya instance ya kobomba ebengami.
hidden.bs.dropdown Evenement oyo ezo beta tango dropdown esili kobombama na mosaleli (ekozela ba transitions ya CSS, mpo esila). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})