부트스트랩 드롭다운에서 하위 메뉴를 구현하는 방법은 무엇입니까?

Bootstrap 드롭다운에서 누락된 하위 메뉴 해결

소개

Bootstrap 3, 인기 있는 프런트 엔드의 이전 버전 프레임워크에는 드롭다운에 하위 메뉴를 구현하기 위한 전용 클래스가 부족했습니다. 이러한 부재는 단순한 인터페이스를 선호하고 하위 메뉴 사용을 줄이는 웹 디자인 트렌드의 진화에 기인할 수 있습니다. 그러나 추가 CSS를 사용하여 하위 메뉴 기능을 구현하는 방법이 있습니다.

Bootstraps 5(2023년 업데이트)

상위 메뉴가 자동으로 닫힐 때 하위 메뉴가 자동으로 닫히지 않도록 JavaScript를 구현하세요. 드롭다운이 열려 있습니다:

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'
    })
})

또는 Navbar용 CSS를 사용하세요. dropdowns:

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

Bootstraps 4(2018년 업데이트)

Bootstrap 3에서 드롭다운 하위 메뉴 클래스가 제거되었기 때문에 CSS를 사용하는 해결 방법은 다음과 같습니다. 필수:

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

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

부트스트랩 3

CSS:

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

마크업:

<ul class="nav navbar-nav">
    <li class="menu-item dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li class="menu-item dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                <ul class="dropdown-menu">
                    <li class="menu-item">
                        <a href="#">Link 1</a>
                    </li>
                    <li class="menu-item dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

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