Bootstrap 4에서 다단계 드롭다운을 어떻게 생성합니까?

Bootstrap 4의 다중 레벨 드롭다운

Bootstrap 4로 작업할 때 탐색 모음 내에 다중 레벨 드롭다운을 통합하는 것이 때때로 어려울 수 있습니다. 그러나 CSS와 JavaScript의 조합을 사용하면 이러한 드롭다운을 생성하는 것이 비교적 간단합니다.

다중 레벨 드롭다운용 CSS

다중 레벨 드롭다운을 구현하려면 추가 CSS 클래스가 도입됩니다.

• .dropdown-submenu: 이 클래스 하위 드롭다운을 포함하는 상위 메뉴 항목에 적용됩니다.
• .dropdown-menu: 이 클래스는 하위 드롭다운에 적용됩니다.
• .dropdown-item: 이 클래스는 하위 드롭다운.

다음 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

To 하위 드롭다운 토글을 처리하는 경우 다음 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;
});

이 코드는 dropdown-toggle 클래스가 있는 하위 드롭다운 내의 모든 항목에 이벤트 리스너를 연결합니다. 항목을 클릭하면 하위 드롭다운의 표시 클래스가 전환되어 한 번에 하나의 하위 드롭다운만 열리게 됩니다.

HTML과 통합

다음과 같이 HTML 코드에서 다중 레벨 드롭다운에 필요한 클래스를 추가하기만 하면 됩니다. 예:

<nav></nav>

이러한 CSS 규칙과 JavaScript를 활용하면 Bootstrap 4의 탐색 표시줄 내에 다단계 드롭다운을 손쉽게 생성하여 사용자 친화적이고 직관적인 탐색 환경을 제공할 수 있습니다.

위 내용은 Bootstrap 4에서 다단계 드롭다운을 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!