Bagaimanakah saya boleh membuat dropdown berbilang peringkat dalam navigasi Bootstrap 4?

Bootstrap 4: Melancarkan Dropdown Berbilang Peringkat dalam Navigasi

Apabila mencari cara yang lancar untuk memasukkan dropdown berbilang peringkat ke dalam Bootstrap 4, jangan cari lagi. Coretan CSS dan JavaScript berikut akan membimbing anda melalui proses tersebut.

CSS untuk Submenu Jatuh Turun

CSS ini menyasarkan penciptaan gaya submenu lungsur turun tambahan.

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

JavaScript ini mengendalikan togol keterlihatan submenu lungsur turun.

$('.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;
});

Contoh HTML

Menggabungkan CSS dan JavaScript, ini Contoh HTML menunjukkan lungsur turun tiga peringkat berfungsi.

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="http://example.com">

Dengan langkah ini, anda boleh mencipta dan menyesuaikan dropdown berbilang peringkat dengan mudah yang meningkatkan navigasi dan interaksi pengguna dalam Bootstrap 4.

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