Source

Pa'u i lalo

Fa'afeso'ota'i fa'amaufa'ailoga mo le fa'aalia o lisi o feso'ota'iga ma isi mea fa'atasi ma le Bootstrap dropdown plugin.

Vaaiga lautele

Pa'u i lalo e mafai ona fesuia'i, fa'alava fa'atatau mo le fa'aalia o lisi o so'otaga ma isi mea. O lo'o fa'afeso'ota'i fa'atasi ma le fa'apipi'i fa'apipi'i a le Bootstrap dropdown JavaScript. E fesuia'i i le kiliki, ae le o le fa'afefe; ose fa'ai'uga fa'atino ma le loto i ai .

Dropdowns e fausia i luga o se faletusi vaega lona tolu, Popper.js , lea e maua ai le tulaga faʻamalosi ma le vaʻaia vaʻaia. Ia mautinoa e aofia ai popper.min.js i luma o le Bootstrap's JavaScript poʻo le faʻaoga bootstrap.bundle.min.js/ bootstrap.bundle.jslea e iai Popper.js. E le fa'aogaina le Popper.js e fa'atulaga ai fa'alalo i lalo i luga o navbars e ui e le mana'omia se tulaga fa'amalosi.

Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js .

Avanoa

O le WAI ARIA standard o loʻo faʻamatalaina se role="menu"widget moni , ae o lenei mea e faʻapitoa i faʻaoga-pei o menus e faʻaosoina ai gaioiga poʻo galuega. ARIA menus e mafai ona i ai na'o mea fa'aitu, pusa siaki mea lisi, mea fa'aitula'i fa'amau, fa'alapotopotoga fa'amau leitio, ma sub-menu.

Bootstrap's dropdowns, i le isi itu, ua mamanuina ina ia lautele ma talafeagai i tulaga eseese ma fausaga faʻailoga. Mo se fa'ata'ita'iga, e mafai ona fa'atupu fa'amaulalo o lo'o iai mea fa'aopoopo ma fa'atonutonu fomu, e pei o fanua su'esu'e po'o fomu saini. Mo lenei mafuaʻaga, e le faʻamoemoeina e Bootstrap (pe faʻaopoopoina otometi) soʻo se rolema aria-uiga manaʻomia mo menus ARIA moni. E tatau i le au tusitala ona aofia ai nei uiga sili atu ona patino.

Ae ui i lea, e faʻaopoopoina e Bootstrap le lagolago faʻapipiʻi mo le tele o fesoʻotaʻiga lisi lisi, e pei o le mafai ona faʻaogaina .dropdown-itemelemene taʻitasi e faʻaaoga ai ki ma tapuni le lisi ma le ESCki.

Faataitaiga

Afifi le koli o le pa'u i lalo (lou faamau po'o le so'oga) ma le lisi fa'alalo i totonu .dropdown, po'o se isi elemene e fa'ailoa mai position: relative;. E mafai ona fa'aosoina mai <a>po'o <button>elemene e fetaui lelei ma ou mana'oga.

faamau tasi

So'o se mea e tasi .btne mafai ona liua i se pa'u i lalo toggle ma nisi suiga fa'ailoga. O le auala lenei e mafai ai ona e faʻaogaina i latou i <button>elemene e lua:

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>

Ma faʻatasi ai ma <a>elemene:

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>

O le vaega pito sili ona lelei e mafai ona e faia lenei mea i soʻo se suiga faʻamau, foi:

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>

Fa'amau vaevae

E fa'apena fo'i, fa'atupu fa'amaufa'ailoga vaelua fa'atasi ma fa'ailoga tutusa ma fa'amau fa'amau tasi, ae fa'atasi ai ma le fa'aopoopoina .dropdown-toggle-splitmo le avanoa talafeagai i le fa'amaufa'ailoga.

Matou te fa'aogaina lenei vasega fa'aopoopo e fa'aitiitia ai le fa'alava paddingi itu uma e lua o le fa'ailoga i le 25% ma aveese le margin-leftfa'aopoopo mo fa'amau fa'amau fa'amau. O na suiga fa'aopoopo e fa'amautu ai le fa'amaufa'ailoga i le ki vaelua ma tu'u ai se vaega e sili atu le lapopo'a ta i tafatafa o le ki autu.

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>

Tele

O fa'amau fa'amau e galue i fa'amau o so'o se lapo'a, e aofia ai fa'amau fa'aletonu ma vaevae fa'amau.

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

Fa'atonuga

Pa'u

Fa'aoso lisi fa'alalo i luga o elemene e ala i le fa'aopoopo .dropupi le elemene matua.

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>

Matamata

Fa'aoso menus pa'u i le itu taumatau o elemene e ala i le fa'aopoopo .droprighti le elemene matua.

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>

Matāua agavale

Fa'aoso menus pa'u i le agavale o elemene e ala i le fa'aopoopo .droplefti le elemene matua.

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>

O mea o lo'o i lalo ole lisi fa'asolopito e tatau ona avea ma so'otaga, ae e le o toe fa'apea le v4. Ole taimi nei e mafai ona e fa'aogaina <button>elemene i lau pa'u i lalo nai lo na'o <a>le 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>

E mafai fo'i ona e faia ni mea fa'ato'a fa'atasi ma .dropdown-item-text. Lagona le saoloto e faʻapipiʻi atili i le CSS masani poʻo le faʻaogaina o tusitusiga.

Fa'amaufa'ailoga aitema Gaioiga O le isi gaioiga O se isi mea iinei 
<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>

Toaga

Faaopoopo .activei aitema i le pa'ū i lalo e fa'avasega ai e pei o le gaioi .

So'oga masani So'oga gaogao O le isi so'oga 
<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>

Fa'aletonu

Faaopoopo .disabledi aitema i le pa'ū i lalo e fa'apena e le atoatoa .

So'oga masani So'oga fa'aletonu O le isi so'oga 
<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>

Ona o le faaletonu, e otometi lava ona tu'u 100% mai le pito i luga ma le itu agavale o lona matua. Fa'aopoopo .dropdown-menu-righti le .dropdown-menufa'aoga i le taumatau le lisi o le pa'u i lalo.

Ulu i luga! Fa'ato'a fa'atulaga fa'afetai i Popper.js (sei vagana ai ua i ai i totonu o le 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>

Fa'atonuga tali

Afai e te manaʻo e faʻaogaina le faʻaogaina o le tali, faʻamalo le tulaga faʻamalosi e ala i le faʻaopoopoina o le data-display="static"uiga ma faʻaoga vasega fesuiaiga tali.

Ina ia fa'aoga sa'o le lisi o le pa'u i lalo ma le va'aiga ua tu'uina atu pe lapopoa, fa'aopoopo .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>

Ina ia fa'aoga le lisi agavale i lalo ma le va'aiga ua tu'uina atu pe lapopoa, fa'aopoopo .dropdown-menu-rightma .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>

Manatua e te le manaʻomia le faʻaopoopoina o se data-display="static"uiga i faʻamau i lalo i luga o navbars, talu ai e le faʻaaogaina Popper.js i navbars.

Menu o lo'o i totonu

Ulutala

Fa'aopoopo se ulutala e fa'ailoga vaega o gaioioiga i so'o se lisi fa'alalo.

Ulutala pa'ū
Gaioiga O le isi gaioiga 
<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>

Vaevaega

Vaevae vaega o mea fa'aitu fa'atasi ma se vaeluaga.

Gaioiga O le isi gaioiga O se isi mea iinei
So'oga vavae'ese 
<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>

Tusitusi

Tu'u so'o se tusitusiga fa'afuafua i totonu ole lisi fa'alalo ma fa'aoga ma fa'aoga avanoa avanoa . Manatua e te mana'omia ni sitaili fa'aopoopo e fa'agata ai le lautele o le lisi.

O nisi fa'ata'ita'iga o tusitusiga e tafe fua i totonu o le lisi fa'alalo.

Ma o le tele lea o faʻataʻitaʻiga tusitusiga.

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

Fomu

Tu'u se fomu i totonu o le lisi o le pa'u i lalo, pe fai i totonu o le lisi o le pa'u i lalo, ma fa'aoga le pito i lalo po'o le padding utilities e tu'u ai le avanoa leaga e te mana'omia.

E fou iinei? Saini loa Ua galo upu faataga? 
<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'aoga data-offsetpe data-referencesui le nofoaga o le pa'u i lalo.

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>

Fa'aoga

E ala i fa'amatalaga uiga po'o le JavaScript, o le pa'ū fa'apipi'i fa'apipi'i mea natia (pa'u i lalo menus) e ala i le fa'anofoina o le .showvasega i le lisi o matua. O le data-toggle="dropdown"uiga e fa'alagolago i ai mo le tapunia o menus dropdown i se tulaga o talosaga, o se manatu lelei le fa'aaogaina i taimi uma.

I luga o masini e mafai ona pa'i, o le tatalaina o se pa'u i lalo e fa'aopoopoina ai le gaogao ( $.noop) mouseoverfa'atonu i tamaiti vave o le <body>elemene. O lenei hack e ta'utinoina mataga e mana'omia e galue fa'ata'amilo i se fa'alavelave i le tu'uina atu o mea e fai a iOS , lea e ono taofia ai se pa'i i so'o se mea i fafo atu o le pa'u i lalo mai le fa'aosoina o le code e tapuni ai le pa'ū. O le taimi lava e tapuni ai le pa'u i lalo, o nei isi fa'aoga gaogao mouseovere aveese.

E ala i fa'amaumauga uiga

Fa'aopoopo data-toggle="dropdown"i se so'oga po'o se fa'amau e fa'asolo i lalo.

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

E ala i le JavaScript

Valaau le to'alalo e ala i le JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"manaomia pea

Tusa lava pe e te valaʻau lau pa'ū i lalo e ala i le JavaScript pe faʻaaoga le data-api, data-toggle="dropdown"e manaʻomia i taimi uma le i ai i luga o le elemene faʻaoso.

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
fa'apena numera | manoa | galuega faatino 0

Offset o le pa'ū fa'atatau i lona fa'amoemoe.

Pe a faʻaaogaina se galuega e fuafua ai le offset, e valaʻau i se mea o loʻo i ai faʻamatalaga faʻamalo e fai ma ana finauga muamua. Ole galuega e tatau ona toe faʻafoʻi se mea e tutusa le fausaga. O le fa'aosoina elemene DOM node ua pasia e fai ma finauga lona lua.

Mo nisi fa'amatalaga va'ai ile Popper.js's offset docs .
liliu boolean moni Fa'ataga le Pa'u i lalo e fa'ase'e pe a o'o i luga o le elemene fa'asino. Mo nisi fa'amatalaga va'ai ile Popper.js's flip docs .
tuaoi manoa | elemene 'scrollParent' Fa'agata tapula'a tuaoi o le lisi e to'a i lalo. Talia le taua o le 'viewport', 'window', 'scrollParent', poʻo se HTMLElement reference (JavaScript naʻo). Mo nisi fa'amatalaga va'ai ile Popper.js's preventOverflow docs .
faasinomaga manoa | elemene 'togo Fa'asinoga elemene o le lisi o le pa'u i lalo. Talia le taua o le 'toggle', 'parent', poʻo se HTMLElement reference. Mo nisi faʻamatalaga vaʻai ile Popper.js's referenceObject docs .
fa'aaliga manoa 'malosi' E ala i le faaletonu, matou te faʻaaogaina Popper.js mo le faʻatulagaina o tulaga. Taofi lenei mea i le static.
popperConfig null | mea faitino null Ina ia suia le fa'aletonu o le Popper.js config a Bootstrap, va'ai le fa'atulagaina o Popper.js

Manatua pe a boundaryseti i soʻo se tau e ese mai i le 'scrollParent', o le sitaili position: statice faʻaoga i le .dropdownkoneteina.

Metotia

Metotia Fa'amatalaga
$().dropdown('toggle') Fa'asolo i lalo le lisi o le navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.
$().dropdown('show') Fa'aali le lisi o le pa'u i lalo o se navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.
$().dropdown('hide') Natia le lisi pa'u i lalo o se navbar ua tu'uina atu po'o le fa'asalalauga fa'apipi'i.
$().dropdown('update') Fa'afou le tulaga o le pa'u i lalo o se elemene.
$().dropdown('dispose') Fa'aleagaina le pa'u i lalo o se elemene.

Mea na tutupu

O mea uma e pa'u i lalo o lo'o fa'ao i le .dropdown-menu'elemene matua ma e iai se relatedTargetmeatotino, o lona tau o le elemene taula ta'amilo. hide.bs.dropdownma hidden.bs.dropdownmea na tutupu e iai se clickEventmeatotino (na'o le ituaiga o mea na tupu muamua click) o lo'o i ai se Mea Fa'atino mo le kiliki o mea na tupu.

Mea na tupu Fa'amatalaga
show.bs.dropdown E mu vave lenei mea pe a valaau le auala fa'ata'ita'iga.
shown.bs.dropdown O lenei mea e tupu pe a faʻaalia le pa'ū i lalo i le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa).
hide.bs.dropdown O lenei mea e tupu e faʻamalo vave pe a valaʻau le auala faʻataʻitaʻiga natia.
hidden.bs.dropdown O lenei mea e tupu pe a maeʻa ona natia le pa'ū i lalo mai le tagata faʻaoga (o le a faʻatali mo suiga CSS, e faʻamaeʻa). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})