Bab menu drop-down Bootstrap menjelaskan menu tarik-turun, tetapi tidak melibatkan bagian interaksi. Bab ini akan menjelaskan interaksi menu drop-down secara detail. Menggunakan plugin dropdown, Anda dapat menambahkan menu dropdown ke komponen apa pun (seperti bilah navigasi, tab, menu navigasi kapsul, tombol, dll.).
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi dropdown.js. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
1. Penggunaan
Anda dapat beralih konten tersembunyi dari plugin menu dropdown (dropdown):
1. Gunakan atribut data: Tambahkan data-kilat = "dropdown" ke tautan atau tombol untuk mengganti menu tarik-turun, seperti yang ditunjukkan di bawah ini:
<div> <a data-koggle = "dropdown" href = "#"> pemicu dropdown </a> <ul role = "menu" aria-labeledby = "dlabel"> ... </ul> </div>
Jika Anda perlu menjaga tautan tetap utuh (berguna saat browser tidak mengaktifkan JavaScript), gunakan properti target data alih-alih href = "#":
<Div> <a id = "Dlabel" Role = "Tombol" data-koggle = "dropdown" data-target = "#" href = "/page.html"> menu dropdown (dropdown) <span> </span> </a> <uL role = "menu" aria-labeledby = "dlabel"> </Ul> uL> </Ul>
2. Melalui JavaScript: Untuk beralih melalui JavaScript, silakan gunakan metode berikut:
$ ('. Dropdown-boggle'). dropdown ()
2. Contoh Menu Menarik Sederhana
Dalam penggunaan umum, kode ini sama dengan metode komponen:
// Penggunaan Deklaratif <SEV> <tombol data-koggle = "dropdown"> Menu drop-down <span> </span> </button> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> </a> </li> <li> <li> <a href = "#" href = "#"> tentang </a> </li> </ul> </div>
Inti kunci dari penggunaan deklaratif:
1. Gunakan paket untuk wadah periferal;
2. Mengikat data-kilat = "dropdown" untuk acara tombol klik internal;
3. Gunakan elemen menu.
// Jika tombol berada di luar wadah, itu dapat diikat melalui target data. <tombol id = "btn" data-kilat = "dropdown" data-target = "#dropdown"> Dalam panggilan javascript, tidak ada properti dan metode tidak mudah digunakan. Berikut ini adalah empat acara dasar. // Metode menu drop-down, tetapi masih membutuhkan data-*$ ('#btn'). Dropdown (); $ ('#btn'). Dropdown ('sakelar');Menu drop-down mendukung 4 jenis acara, sesuai dengan sebelum pop-up, setelah pop-up, sebelum ditutup dan setelah ditutup.
// acara, $ serupa lainnya ('#dropdown'). On ('show.bs.dropdown', function () {alert ('freaks segera ketika metode acara dipanggil!');});3. Penggunaan menu drop-down di halaman tab
<! Doctype html> <html> <head> <title> instance bootstrap - Halaman tag dengan menu tarik -turun </iteme> <tautan href = "/bootstrap/css/bootstrap.min.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.min" src="/bootstrap/js/bootstrap.min.js"></script><body> <p> Tag page with drop-down menu</p><ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-koggle = "dropdown" href = "#"> Java <span> </span> </a> <ul> <li> <a href = "#"> ayunan </a> </a> <li> <a href = "#"> swing </a> </a> </a> <li> <a href = "#"> swing </a> </a> </a> <li> <a href = "#" swing </a> </a> </a> <li> <a href = "#"> swing </a> </a> </a> <li> <aer> <aer> href = "#"> ejb </a> </li> <li> <a href = "#"> tautan yang ditandatangani </a> </li> </li> </li> <li> <a href = "#"> php </a> </li> </ul> </body> </html>
Gambar reproduksi:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.