Source

Dropdown

Alihkan overlay kontekstual untuk menampilkan daftar tautan dan lainnya dengan plugin dropdown Bootstrap.

Ringkasan

Dropdown adalah overlay kontekstual yang dapat dialihkan untuk menampilkan daftar tautan dan banyak lagi. Mereka dibuat interaktif dengan plugin JavaScript dropdown Bootstrap yang disertakan. Mereka dialihkan dengan mengklik, bukan dengan mengarahkan; ini adalah keputusan desain yang disengaja .

Dropdown dibuat di perpustakaan pihak ketiga, Popper.js , yang menyediakan deteksi posisi dinamis dan area pandang. Pastikan untuk menyertakan popper.min.js sebelum JavaScript Bootstrap atau gunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang berisi Popper.js. Popper.js tidak digunakan untuk memposisikan dropdown di navbars meskipun karena pemosisian dinamis tidak diperlukan.

Jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.js .

Aksesibilitas

Standar WAI ARIA mendefinisikan role="menu"widget yang sebenarnya , tetapi ini khusus untuk menu seperti aplikasi yang memicu tindakan atau fungsi. Menu ARIA hanya dapat berisi item menu, item menu kotak centang, item menu tombol radio, grup tombol radio, dan submenu.

Dropdown Bootstrap, di sisi lain, dirancang untuk menjadi generik dan berlaku untuk berbagai situasi dan struktur markup. Misalnya, dimungkinkan untuk membuat dropdown yang berisi input tambahan dan kontrol formulir, seperti bidang pencarian atau formulir login. Untuk alasan ini, Bootstrap tidak mengharapkan (atau secara otomatis menambahkan) salah satu roledan aria-atribut yang diperlukan untuk menu ARIA yang sebenarnya. Penulis harus memasukkan atribut yang lebih spesifik ini sendiri.

Namun, Bootstrap menambahkan dukungan bawaan untuk sebagian besar interaksi menu keyboard standar, seperti kemampuan untuk berpindah melalui .dropdown-itemelemen individual menggunakan tombol kursor dan menutup menu dengan ESCtombol tersebut.

Contoh

Bungkus sakelar tarik-turun (tombol atau tautan Anda) dan menu tarik-turun di dalam .dropdown, atau elemen lain yang menyatakan position: relative;. Dropdown dapat dipicu dari <a>atau <button>elemen agar lebih sesuai dengan kebutuhan potensial Anda.

Tombol tunggal

Single apa pun .btndapat diubah menjadi sakelar tarik-turun dengan beberapa perubahan markup. Inilah cara Anda dapat membuatnya bekerja dengan salah satu <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>elemen:

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>

Bagian terbaiknya adalah Anda juga dapat melakukan ini dengan varian tombol apa pun:

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>

Tombol split

Demikian pula, buat dropdown tombol terpisah dengan markup yang hampir sama dengan dropdown tombol tunggal, tetapi dengan penambahan .dropdown-toggle-splitspasi yang tepat di sekitar tanda sisipan dropdown.

Kami menggunakan kelas ekstra ini untuk mengurangi horizontal paddingdi kedua sisi tanda sisipan sebesar 25% dan menghapus margin-leftyang ditambahkan untuk dropdown tombol biasa. Perubahan ekstra itu menjaga tanda sisipan tetap di tengah tombol split dan memberikan area hit berukuran lebih tepat di sebelah tombol 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>

Perekat

Dropdown tombol berfungsi dengan tombol dari semua ukuran, termasuk tombol dropdown default dan split.

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

Petunjuk arah

Drop-up

Picu menu tarik-turun di atas elemen dengan menambahkan .dropupke 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

Picu menu tarik-turun di sebelah kanan elemen dengan menambahkan .droprightke 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>

Dropleft

Picu menu tarik-turun di sebelah kiri elemen dengan menambahkan .dropleftke 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>

Secara historis, konten menu tarik -turun harus berupa tautan, tetapi tidak lagi dengan v4. Sekarang Anda secara opsional dapat menggunakan <button>elemen di dropdown Anda, bukan 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 dapat membuat item tarik-turun non-interaktif dengan .dropdown-item-text. Jangan ragu untuk bergaya lebih jauh dengan CSS khusus atau utilitas teks.

Teks item tarik-turun Tindakan Tindakan lain 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 .activeke item di dropdown untuk menatanya sebagai aktif .

Tautan biasa Tautan aktif tautan 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>

Dengan disabilitas

Tambahkan .disabledke item di tarik-turun untuk menatanya sebagai dinonaktifkan .

Tautan biasa Tautan dinonaktifkan tautan 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 default, menu dropdown secara otomatis diposisikan 100% dari atas dan di sepanjang sisi kiri induknya. Tambahkan .dropdown-menu-rightke a .dropdown-menuuntuk meratakan kanan menu tarik-turun.

Perhatian! Dropdown diposisikan berkat Popper.js (kecuali jika terdapat dalam 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>

Penyelarasan responsif

Jika Anda ingin menggunakan perataan responsif, nonaktifkan pemosisian dinamis dengan menambahkan data-display="static"atribut dan gunakan kelas variasi responsif.

Untuk menyelaraskan menu tarik-turun ke kanan dengan titik henti sementara yang diberikan atau lebih besar, tambahkan.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>

Untuk menyelaraskan kiri menu tarik-turun dengan titik henti sementara yang diberikan atau lebih besar, tambahkan .dropdown-menu-rightdan .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>

Perhatikan bahwa Anda tidak perlu menambahkan data-display="static"atribut ke tombol dropdown di navbars, karena Popper.js tidak digunakan di navbars.

konten menu

Header

Tambahkan tajuk untuk memberi label pada bagian tindakan di menu tarik-turun mana pun.

Tajuk tarik-turun
Tindakan Tindakan lain 
<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>

Jangka pembagi garis

Pisahkan kelompok item menu terkait dengan pembagi.

Tindakan Tindakan lain Sesuatu yang lain di sini
Tautan 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

Tempatkan teks bentuk bebas apa pun dalam menu tarik-turun dengan teks dan gunakan utilitas spasi . Perhatikan bahwa Anda mungkin memerlukan gaya ukuran tambahan untuk membatasi lebar menu.

Beberapa contoh teks yang mengalir bebas dalam menu tarik-turun.

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

Formulir

Letakkan formulir di dalam menu tarik-turun, atau buat menjadi menu tarik-turun, dan gunakan utilitas margin atau padding untuk memberikan ruang negatif yang Anda butuhkan.

Baru di sekitar sini? Daftar Tidak ingat kata sandi? 
<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 mengubah lokasi tarik-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, plugin dropdown mengaktifkan konten tersembunyi (menu dropdown) dengan mengaktifkan .showkelas pada item daftar induk. Atribut data-toggle="dropdown"ini diandalkan untuk menutup menu tarik-turun di tingkat aplikasi, jadi sebaiknya selalu menggunakannya.

Pada perangkat yang mendukung sentuhan, membuka tarik-turun menambahkan penangan kosong ( $.noop) ke turunan langsung dari elemen. Peretasan yang diakui jelek ini diperlukan untuk mengatasi kekhasan dalam delegasi acara iOS , yang jika tidak, akan mencegah ketukan di mana pun di luar dropdown memicu kode yang menutup dropdown. Setelah dropdown ditutup, penangan kosong tambahan ini akan dihapus.mouseover<body>mouseover

Melalui atribut data

Tambahkan data-toggle="dropdown"ke tautan atau tombol untuk mengaktifkan tarik-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 dropdown melalui JavaScript:

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

Terlepas dari apakah Anda memanggil dropdown Anda melalui JavaScript atau sebagai gantinya menggunakan data-api, data-toggle="dropdown"selalu harus ada di elemen pemicu dropdown.

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset="".

Nama Jenis Bawaan Keterangan
mengimbangi nomor | string | fungsi 0

Offset dari dropdown relatif terhadap targetnya.

Ketika suatu fungsi digunakan untuk menentukan offset, itu dipanggil dengan objek yang berisi data offset sebagai argumen pertamanya. Fungsi harus mengembalikan objek dengan struktur yang sama. Node DOM elemen pemicu dilewatkan sebagai argumen kedua.

Untuk informasi lebih lanjut, lihat dokumen offset Popper.js .
Balik boolean BENAR Izinkan Dropdown untuk membalik jika terjadi tumpang tindih pada elemen referensi. Untuk informasi lebih lanjut, lihat flip docs Popper.js .
batas string | elemen 'scrollInduk' Batas batasan overflow dari menu dropdown. Menerima nilai 'viewport', 'window', 'scrollParent', atau referensi HTMLElement (khusus JavaScript). Untuk informasi lebih lanjut, lihat dokumen preventOverflow Popper.js .
referensi string | elemen 'beralih' Elemen referensi dari menu tarik-turun. Menerima nilai 'toggle', 'parent', atau referensi HTMLElement. Untuk informasi lebih lanjut, lihat referenceObject docs Popper.js .
menampilkan rangkaian 'dinamis' Secara default, kami menggunakan Popper.js untuk penentuan posisi dinamis. Nonaktifkan ini dengan static.
popperConfig nol | obyek batal Untuk mengubah konfigurasi Popper.js default Bootstrap, lihat konfigurasi Popper.js

Perhatikan bila boundarydisetel ke nilai apa pun selain 'scrollParent', gaya position: staticditerapkan ke .dropdownpenampung.

Metode

metode Keterangan
$().dropdown('toggle') Mengalihkan menu tarik-turun dari bilah navigasi atau navigasi tab tertentu.
$().dropdown('show') Menampilkan menu tarik-turun dari bilah navigasi atau navigasi tab tertentu.
$().dropdown('hide') Menyembunyikan menu tarik-turun dari bilah navigasi atau navigasi tab tertentu.
$().dropdown('update') Memperbarui posisi dropdown elemen.
$().dropdown('dispose') Menghancurkan dropdown elemen.

Acara

Semua peristiwa dropdown dipicu pada .dropdown-menuelemen induk 's dan memiliki relatedTargetproperti, yang nilainya adalah elemen jangkar toggling. hide.bs.dropdowndan hidden.bs.dropdownevent memiliki clickEventproperti (hanya jika tipe event aslinya adalah click) yang berisi Event Object untuk event klik.

Peristiwa Keterangan
show.bs.dropdown Acara ini langsung aktif ketika metode show instance dipanggil.
shown.bs.dropdown Acara ini diaktifkan ketika dropdown telah dibuat terlihat oleh pengguna (akan menunggu transisi CSS, selesai).
hide.bs.dropdown Acara ini segera diaktifkan ketika metode instance sembunyikan telah dipanggil.
hidden.bs.dropdown Acara ini diaktifkan ketika dropdown telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS, selesai). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})