Source

Jatuh turun

Togol tindanan kontekstual untuk memaparkan senarai pautan dan banyak lagi dengan pemalam lungsur turun Bootstrap.

Gambaran keseluruhan

Jatuh turun boleh togol, tindanan kontekstual untuk memaparkan senarai pautan dan banyak lagi. Ia dibuat interaktif dengan pemalam JavaScript lungsur Bootstrap yang disertakan. Mereka ditogol dengan mengklik, bukan dengan melayang; ini adalah keputusan reka bentuk yang disengajakan .

Dropdown dibina pada pustaka pihak ketiga, Popper.js , yang menyediakan pengesanan kedudukan dinamik dan port pandangan. Pastikan anda memasukkan popper.min.js sebelum JavaScript Bootstrap atau gunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang mengandungi Popper.js. Popper.js tidak digunakan untuk meletakkan dropdown dalam bar navigasi walaupun kerana kedudukan dinamik tidak diperlukan.

Jika anda sedang membina JavaScript kami daripada sumber, ia memerlukanutil.js .

Kebolehcapaian

Piawaian WAI ARIA mentakrifkan role="menu"widget sebenar , tetapi ini khusus untuk menu seperti aplikasi yang mencetuskan tindakan atau fungsi. Menu ARIA hanya boleh mengandungi item menu, item menu kotak semak, item menu butang radio, kumpulan butang radio dan sub-menu.

Sebaliknya, dropdown Bootstrap direka bentuk untuk menjadi generik dan boleh digunakan pada pelbagai situasi dan struktur penanda. Sebagai contoh, adalah mungkin untuk membuat lungsur turun yang mengandungi input tambahan dan kawalan borang, seperti medan carian atau borang log masuk. Atas sebab ini, Bootstrap tidak menjangkakan (atau menambah secara automatik) mana-mana atribut roledan yang diperlukan untuk menu ARIA sebenar. Pengarang perlu memasukkan atribut yang lebih khusus ini sendiri.aria-

Walau bagaimanapun, Bootstrap menambah sokongan terbina dalam untuk kebanyakan interaksi menu papan kekunci standard, seperti keupayaan untuk bergerak melalui .dropdown-itemelemen individu menggunakan kekunci kursor dan menutup menu dengan ESCkekunci.

Contoh

Balut togol lungsur turun (butang atau pautan anda) dan menu lungsur turun dalam .dropdown, atau elemen lain yang mengisytiharkan position: relative;. Jatuh turun boleh dicetuskan daripada <a>atau <button>unsur supaya lebih sesuai dengan potensi keperluan anda.

Butang tunggal

Mana-mana single .btnboleh ditukar menjadi togol lungsur turun dengan beberapa perubahan markup. Begini cara anda boleh menjadikannya berfungsi dengan mana-mana <button>elemen:

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>

Dan dengan <a>unsur:

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>

Bahagian yang terbaik ialah anda boleh melakukan ini dengan mana-mana varian butang juga:

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>

Butang belah

Begitu juga, buat menu lungsur butang pisah dengan penanda yang hampir sama dengan lungsur butang tunggal, tetapi dengan penambahan .dropdown-toggle-splituntuk jarak yang betul di sekeliling karet lungsur.

Kami menggunakan kelas tambahan ini untuk mengurangkan mendatar paddingpada kedua-dua sisi karet sebanyak 25% dan mengalih keluar kelas margin-leftyang ditambahkan untuk menu lungsur butang biasa. Perubahan tambahan tersebut memastikan karet berpusat pada butang belah dan menyediakan kawasan pukulan bersaiz lebih sesuai di sebelah butang utama.

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>

Saiz

Butang lungsur turun berfungsi dengan butang semua saiz, termasuk butang lungsur lalai dan pisah.

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

Arah

Dropup

Cetuskan menu lungsur turun di atas elemen dengan menambah .dropuppada elemen induk.

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

Cetuskan menu lungsur turun di sebelah kanan elemen dengan menambahkan .droprightpada elemen induk.

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>

Titisan kiri

Cetuskan menu lungsur turun di sebelah kiri elemen dengan menambah .dropleftpada elemen induk.

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>

Kandungan menu lungsur dari segi sejarah mestilah pautan, tetapi itu tidak lagi berlaku dengan v4. Kini anda boleh menggunakan <button>elemen dalam menu lungsur anda dan bukannya hanya <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>

Anda juga boleh membuat item lungsur turun bukan interaktif dengan .dropdown-item-text. Jangan ragu untuk menggayakan lagi dengan CSS tersuai atau utiliti teks.

Teks item lungsur turun Tindakan Satu lagi tindakan Sesuatu yang lain di sini 
<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>

Aktif

Tambahkan .activepada item dalam menu lungsur untuk menggayakannya sebagai aktif .

Pautan biasa Pautan aktif Pautan lain 
<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>

Dilumpuhkan

Tambahkan .disabledpada item dalam menu lungsur untuk menggayakannya sebagai dilumpuhkan .

Pautan biasa Pautan dilumpuhkan Pautan lain 
<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>

Secara lalai, menu lungsur turun secara automatik diletakkan 100% dari atas dan di sepanjang sebelah kiri induknya. Tambahkan .dropdown-menu-rightpada .dropdown-menujajaran ke kanan menu lungsur turun.

Angkat kepala! Dropdown diposisikan terima kasih kepada Popper.js (kecuali apabila ia terkandung dalam bar navigasi).

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

Penjajaran responsif

Jika anda ingin menggunakan penjajaran responsif, lumpuhkan kedudukan dinamik dengan menambahkan data-display="static"atribut dan gunakan kelas variasi responsif.

Untuk menjajarkan menu lungsur ke kanan.dropdown-menu{-sm|-md|-lg|-xl}-right dengan titik putus yang diberikan atau lebih besar, tambahkan .

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

Untuk menjajarkan menu lungsur ke kiri.dropdown-menu-right dengan titik putus yang diberikan atau lebih besar, tambah dan .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>

Ambil perhatian bahawa anda tidak perlu menambah data-display="static"atribut pada butang lungsur turun dalam bar navigasi, kerana Popper.js tidak digunakan dalam bar navigasi.

Kandungan menu

Pengepala

Tambahkan pengepala untuk melabel bahagian tindakan dalam mana-mana menu lungsur turun.

Tajuk jatuh turun
Tindakan Satu lagi tindakan 
<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>

Pembahagi

Asingkan kumpulan item menu yang berkaitan dengan pembahagi.

Tindakan Satu lagi tindakan Sesuatu yang lain di sini
Pautan terpisah 
<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>

Teks

Letakkan sebarang teks bentuk bebas dalam menu lungsur turun dengan teks dan gunakan utiliti jarak . Ambil perhatian bahawa anda mungkin memerlukan gaya saiz tambahan untuk mengekang lebar menu.

Beberapa contoh teks yang mengalir bebas dalam menu lungsur turun.

Dan ini adalah lebih banyak contoh teks.

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

Borang

Letakkan borang dalam menu lungsur turun, atau jadikannya sebagai menu lungsur turun, dan gunakan utiliti margin atau padding untuk memberikannya ruang negatif yang anda perlukan.

Baru dekat sini? daftar lupa kata laluan? 
<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>

Gunakan data-offsetatau data-referenceuntuk menukar lokasi lungsur turun.

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>

Penggunaan

Melalui atribut data atau JavaScript, pemalam lungsur turun menogol kandungan tersembunyi (menu lungsur) dengan menogol .showkelas pada item senarai induk. Atribut data-toggle="dropdown"ini bergantung kepada untuk menutup menu lungsur turun pada peringkat aplikasi, jadi adalah idea yang baik untuk sentiasa menggunakannya.

Pada peranti yang didayakan sentuhan, membuka menu lungsur menambah pengendali kosong ( $.noop) mouseoverkepada anak terdekat <body>unsur tersebut. Penggodaman yang diakui jelik ini diperlukan untuk mengatasi masalah dalam delegasi acara iOS , yang sebaliknya akan menghalang ketik di mana-mana di luar menu lungsur daripada mencetuskan kod yang menutup menu lungsur. Setelah menu lungsur ditutup, mouseoverpengendali kosong tambahan ini dialih keluar.

Melalui atribut data

Tambahkan data-toggle="dropdown"pada pautan atau butang untuk menogol lungsur turun.

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

Melalui JavaScript

Panggil lungsur turun melalui JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"masih diperlukan

Tidak kira sama ada anda memanggil lungsur turun melalui JavaScript atau sebaliknya menggunakan data-api, data-toggle="dropdown"sentiasa diperlukan untuk hadir pada elemen pencetus lungsur turun.

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-offset="".

Nama taip Lalai Penerangan
mengimbangi nombor | rentetan | fungsi 0

Mengimbangi lungsur turun berbanding sasarannya.

Apabila fungsi digunakan untuk menentukan ofset, ia dipanggil dengan objek yang mengandungi data offset sebagai hujah pertamanya. Fungsi mesti mengembalikan objek dengan struktur yang sama. Nod DOM elemen pencetus diluluskan sebagai hujah kedua.

Untuk maklumat lanjut rujuk dokumen offset Popper.js .
flip boolean benar Benarkan Dropdown untuk membelek sekiranya berlaku pertindihan pada elemen rujukan. Untuk maklumat lanjut rujuk dokumen selak Popper.js .
sempadan rentetan | unsur 'scrollParent' Sempadan kekangan limpahan menu lungsur. Menerima nilai 'viewport', 'window', 'scrollParent', atau rujukan HTMLElement (JavaScript sahaja). Untuk maklumat lanjut rujuk dokumen preventOverflow Popper.js .
rujukan rentetan | unsur 'togol' Elemen rujukan menu lungsur turun. Menerima nilai 'toggle', 'parent', atau rujukan HTMLElement. Untuk maklumat lanjut rujuk Popper.js's referenceObject docs .
paparan tali 'dinamik' Secara lalai, kami menggunakan Popper.js untuk kedudukan dinamik. Lumpuhkan ini dengan static.
popperConfig null | objek null Untuk menukar konfigurasi Popper.js lalai Bootstrap, lihat konfigurasi Popper.js

Perhatikan apabila boundaryditetapkan kepada sebarang nilai selain daripada 'scrollParent', gaya position: staticdigunakan pada .dropdownbekas.

Kaedah

Kaedah Penerangan
$().dropdown('toggle') Togol menu lungsur turun bar navigasi yang diberikan atau navigasi tab.
$().dropdown('show') Menunjukkan menu lungsur turun bar navigasi tertentu atau navigasi tab.
$().dropdown('hide') Menyembunyikan menu lungsur turun bar navigasi tertentu atau navigasi tab.
$().dropdown('update') Mengemas kini kedudukan lungsur turun elemen.
$().dropdown('dispose') Memusnahkan lungsur turun elemen.

Peristiwa

Semua acara lungsur turun dicetuskan pada .dropdown-menuelemen induk dan mempunyai relatedTargetsifat, yang nilainya ialah elemen sauh togol. hide.bs.dropdowndan hidden.bs.dropdownacara mempunyai clickEventsifat (hanya apabila jenis acara asal ialah click) yang mengandungi Objek Acara untuk acara klik.

Peristiwa Penerangan
show.bs.dropdown Peristiwa ini berlaku serta-merta apabila kaedah contoh tunjukkan dipanggil.
shown.bs.dropdown Peristiwa ini dicetuskan apabila lungsur turun telah ditunjukkan kepada pengguna (akan menunggu peralihan CSS, untuk diselesaikan).
hide.bs.dropdown Peristiwa ini dicetuskan serta-merta apabila kaedah hide instance telah dipanggil.
hidden.bs.dropdown Peristiwa ini dicetuskan apabila lungsur turun telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS, selesai). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})