`dropdown-submenu`를 제거한 후 Bootstrap에서 드롭다운 하위 메뉴를 만드는 방법은 무엇입니까?

Bootstrap 드롭다운 하위 메뉴 기능 제거

Bootstrap 3에서는 드롭다운 하위 메뉴 클래스가 제거되었습니다. 이 클래스는 기본 드롭다운 아래에 중첩된 하위 메뉴를 만드는 깔끔한 방법을 제공했습니다. 그러나 Bootstrap 제작자는 특히 모바일 환경에서 하위 메뉴가 더 이상 사용되지 않는다고 결정했습니다.

하위 메뉴 기능에 대한 대체 옵션

CSS 전용 방법:

Bootstrap 5의 경우 JavaScript 또는 CSS를 사용하여 하위 메뉴를 얻을 수 있습니다 기능:

호버의 CSS 전용 Navbar 하위 메뉴

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

호버의 CSS 전용 Navbar 하위 메뉴(오른쪽 정렬)

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

JavaScript 방법 부트스트랩 5:

CSS 전용 옵션 외에도 일부 JavaScript를 사용하여 Bootstrap 5에서 하위 메뉴 기능을 구현할 수도 있습니다.

let dropdowns = document.querySelectorAll('.dropdown-toggle');
dropdowns.forEach((dd) => {
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling;
        el.style.display = el.style.display==='block'?'none':'block';
    })
});

Bootstrap 3용 CSS 방법:

드롭다운 하위 메뉴 클래스가 제거되었음에도 불구하고 여전히 구현할 수 있습니다. CSS를 사용한 Bootstrap 3의 하위 메뉴 기능:

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

결론

특정 하위 메뉴 클래스는 더 이상 사용할 수 없지만, 다음에 따라 Bootstrap에서 드롭다운 하위 메뉴를 만드는 데 사용할 수 있는 몇 가지 대체 접근 방식이 있습니다. 귀하의 요구 사항과 사용 중인 버전.

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