Bootstrap 4에서 다단계 드롭다운 메뉴를 만드는 방법은 무엇입니까?

Bootstrap 4의 다중 레벨 드롭다운 메뉴

Bootstrap 4에서 다중 레벨 드롭다운을 생성하는 것은 이전 버전만큼 간단하지 않습니다. 이를 달성하려면 CSS와 JavaScript를 조합하여 사용할 수 있습니다. 다음 솔루션은 하위 메뉴에 대한 드롭다운 하위 메뉴 클래스를 소개합니다. 항목:

CSS:

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

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

HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">

이 솔루션을 사용하면 다음이 가능합니다. 깔끔하고 반응성이 뛰어난 디자인의 다단계 드롭다운 메뉴. 기본 Bootstrap 4 스타일과 원활하게 작동하며 하위 메뉴를 전환하는 기능을 추가합니다.

위 내용은 Bootstrap 4에서 다단계 드롭다운 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!