Bootstrap 4 탐색에서 다중 레벨 드롭다운을 어떻게 만들 수 있나요?

Bootstrap 4: 탐색 내에서 다중 레벨 드롭다운 실행

다중 레벨 드롭다운을 Bootstrap 4에 통합하는 원활한 방법을 찾고 있다면 더 이상 찾지 마세요. 다음 CSS 및 JavaScript 스니펫은 프로세스를 안내합니다.

드롭다운 하위 메뉴용 CSS

이 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 토글

이 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 예제

CSS와 JavaScript를 통합한 이 JavaScript는 HTML 예제는 기능적 3단계를 보여줍니다. dropdown.

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

이러한 단계를 통해 Bootstrap 4 내에서 사용자 탐색 및 상호 작용을 향상시키는 다단계 드롭다운을 쉽게 만들고 사용자 정의할 수 있습니다.

위 내용은 Bootstrap 4 탐색에서 다중 레벨 드롭다운을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!