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 , 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. Popper 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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

Dan dengan <a>unsur:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

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

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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.

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

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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.

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

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled">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 (kecuali apabila ia terkandung dalam bar navigasi).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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-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 tidak digunakan dalam bar navigasi.

Pengepala

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

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

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

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

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

Penggunaan

Melalui atribut data atau JavaScript, pemalam lungsur turun menogol kandungan tersembunyi (menu lungsur) dengan menogol .showkelas pada induk .dropdown-menu. 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 type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu">
    ...
  </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 kepada dokumen offset Popper .
flip	boolean	benar	Benarkan Dropdown untuk membelek sekiranya berlaku pertindihan pada elemen rujukan. Untuk maklumat lanjut rujuk dokumen flip Popper .
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 .
rujukan	rentetan \| unsur	'togol'	Elemen rujukan menu lungsur turun. Menerima nilai `'toggle'`, `'parent'`, atau rujukan HTMLElement. Untuk maklumat lanjut rujuk Popper's referenceObject docs .
paparan	tali	'dinamik'	Secara lalai, kami menggunakan Popper untuk kedudukan dinamik. Lumpuhkan ini dengan `static`.
popperConfig	null \| objek	null	Untuk menukar konfigurasi Popper lalai Bootstrap, lihat konfigurasi Popper

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...
})

Jatuh turun

Gambaran keseluruhan

Kebolehcapaian

Contoh

Butang tunggal

Butang belah

Saiz

Arah

Dropup

Dropright

Titisan kiri

Item menu

Aktif

Dilumpuhkan

Penjajaran menu

Penjajaran responsif

Kandungan menu

Pengepala

Pembahagi

Teks

Borang

Penggunaan

Melalui atribut data

Melalui JavaScript

`data-toggle="dropdown"`masih diperlukan

Pilihan

Kaedah

Peristiwa

Jatuh turun

Gambaran keseluruhan

Kebolehcapaian

Contoh

Butang tunggal

Butang belah

Saiz

Arah

Dropup

Dropright

Titisan kiri

Item menu

Aktif

Dilumpuhkan

Penjajaran menu

Penjajaran responsif

Kandungan menu

Pengepala

Tajuk jatuh turun

Pembahagi

Teks

Borang

Pilihan lungsur turun

Penggunaan

Melalui atribut data

Melalui JavaScript

data-toggle="dropdown"masih diperlukan

Pilihan

Kaedah

Peristiwa

`data-toggle="dropdown"`masih diperlukan