jQuery 없이 부트스트랩 메뉴 축소

jQuery를 사용하여 Bootstrap이 메뉴 축소와 같은 작은 일을 할 수 있도록 해야 하는 것은 약간 과도할 수 있습니다. 다행히도 이것은 쉽게 해결할 수 있습니다.

navbar-toggler의 클릭 핸들러와 축소 섹션을 래핑하는 div의 ID를 제외하고 다른 부트스트랩 축소 탐색 모음과 동일한 HTML을 사용할 수 있습니다.

<nav class="navbar navbar-light bg-white navbar-expand-md">
    <div class="container col-12">
        <a class="navbar-brand" href="/">
            <b>TestSite</b>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list"
            aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation"
            onclick="displayMenu(event)">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-list">
            <ul class="nav navbar-nav ml-auto ">
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/tools/">Tools</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

그런 다음 이 함수를 스크립트 태그나 채우기에 넣으면 탐색 모음이 완벽하게 작동합니다.

function displayMenu(event) {
    if (document.getElementById("navbar-list").classList.contains("show")) {
        document.getElementById("navbar-list").classList.remove("show")
    }
    else {
        document.getElementById("navbar-list").classList.add("show")
    }
}

이것이 유용하다고 생각했다면 내 기사도 흥미로울 것입니다.