Cara mengikat kotak drop-down bootstrap

Anda perlu menggunakan JavaScript untuk mengikat kotak drop-down bootstrap, ikuti langkah-langkah ini: memperkenalkan perpustakaan Bootstrap JavaScript. INTEGANIATE elemen drop-down menggunakan kelas lungsur. Mengikat pengendali acara seperti show.bs.dropdown dan hidden.bs.dropdown. Kaedah panggilan kelas dropdown (seperti Show () dan Hide ()) untuk mengawal tingkah laku kotak lungsur.

Bootstrap menggunakan javascript untuk mengikat kotak drop-down

Bootstrap menyediakan komponen mudah dan mudah digunakan, termasuk kotak drop-down. Untuk mengikat kotak drop-down menggunakan JavaScript, gunakan langkah-langkah berikut:

1. Memperkenalkan JavaScrip Bootstrap

Di halaman HTML, perkenalkan Perpustakaan Bootstrap JavaScript:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2. Segera kotak drop-down

Cari elemen dropdown yang anda mahu mengikat, dan instantiate menggunakan kelas dropdown Bootstrap:

 <code class="javascript">const dropdown = new bootstrap.Dropdown(document.getElementById('dropdown-element'));</code>

3. Mengikat pengendali acara

Anda boleh mengikat pelbagai pengendali acara ke kotak drop-down seperti yang diperlukan. Berikut adalah beberapa contoh:

• show.bs.dropdown : Dicipat sebelum kotak drop-down dipaparkan
• show.bs.dropdown : Dicetus selepas kotak drop-down dipaparkan
• Hide.bs.dropdown : Dicetus sebelum kotak drop-down tersembunyi
• Tersembunyi.bs.dropdown : dicetuskan selepas kotak drop-down tersembunyi

Untuk mengikat peristiwa ini, gunakan kaedah on() :

 <code class="javascript">dropdown.on('show.bs.dropdown', (e) => { // 在此添加要执行的操作}); dropdown.on('hidden.bs.dropdown', (e) => { // 在此添加要执行的操作});</code>

4. Panggil kaedah kotak drop-down

Anda boleh menggunakan kaedah kelas dropdown untuk mengawal tingkah laku kotak lungsur. Berikut adalah beberapa contoh:

• Tunjukkan () : Tunjukkan kotak drop-down
• Sembunyikan () : Sembunyikan kotak drop-down
• Togol () : Togol paparan/keadaan tersembunyi kotak juntai bawah
• Buang () : hancurkan contoh kotak drop-down

Untuk memanggil kaedah ini, gunakan sintaks berikut:

 <code class="javascript">dropdown.show(); dropdown.hide(); dropdown.toggle(); dropdown.dispose();</code>

Dengan mengikuti langkah-langkah ini, anda boleh mengikat dan mengawal kotak drop-down dengan mudah dalam bootstrap menggunakan JavaScript.

Atas ialah kandungan terperinci Cara mengikat kotak drop-down bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!