Bagaimanakah saya boleh membuat lungsur turun bertingkat dalam Bootstrap 4?

Turun Turun Berbilang Peringkat dalam Bootstrap 4

Apabila bekerja dengan Bootstrap 4, memasukkan dropdown berbilang peringkat dalam bar navigasi kadangkala boleh menimbulkan cabaran. Walau bagaimanapun, dengan gabungan CSS dan JavaScript, membuat lungsur turun ini agak mudah.

CSS untuk Turun Berbilang Peringkat

Untuk mencapai lungsur turun berbilang peringkat, kelas CSS tambahan diperkenalkan:

• .dropdown-submenu: Kelas ini digunakan untuk item menu induk yang mengandungi sub-dropdown.
• .dropdown-menu: Kelas ini digunakan pada sub-dropdown.
• .dropdown- item: Kelas ini digunakan pada semua item dalam sub-dropdown.

Peraturan CSS berikut mentakrifkan gaya untuk elemen ini:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

JavaScript untuk Jatuh Turun Berbilang Peringkat

Untuk mengendalikan togol sub-turun turun, kod JavaScript berikut digunakan:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });


  return false;
});

Kod ini melampirkan pendengar acara pada mana-mana item dalam sub-turun turun yang mempunyai togol lungsur turun kelas. Apabila item diklik, ia menogol kelas rancangan pada sub-dropdown, memastikan hanya satu sub-dropdown dibuka pada satu-satu masa.

Integrasi dengan HTML

Dalam kod HTML anda, cuma tambahkan kelas yang diperlukan untuk lungsur turun berbilang peringkat, seperti yang dilihat dalam ini contoh:

<nav>

Menggunakan peraturan CSS dan JavaScript ini, anda boleh membuat lungsur turun berbilang peringkat dengan mudah dalam bar navigasi dalam Bootstrap 4, memberikan pengalaman navigasi yang mesra pengguna dan intuitif.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat lungsur turun bertingkat dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!