외부 클릭으로 Bootstrap 3 접이식 Navbar를 닫는 방법은 무엇입니까?

Bootstrap 3에서 외부 클릭으로 축소 가능한 Navbar 닫기

navbar 토글의 사용자 경험을 향상하려면 열려 있는 navbar를 닫는 기능이 필요합니다. 경계 외부를 클릭합니다. 제공된 코드는 document.click 이벤트 리스너를 활용하여 이 문제를 해결하려고 시도합니다. 그러나 현재 구현으로는 원하는 기능을 구현하는 데 부족합니다.

해결 방법:

다음 코드 조각은 문서 전체 클릭을 모니터링하여 문제를 효과적으로 해결합니다. 클릭한 요소가 navbar 요소 내에 있는지 검사합니다. navbar가 열려 있고("navbar-collapse in" 클래스의 존재로 결정됨) 클릭한 요소가 "navbar-toggle" 클래스를 소유하지 않은 경우 클릭 이벤트는 navbar-toggle 버튼 클릭을 효과적으로 트리거합니다. navbar를 축소합니다.

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

이 접근 방식은 우아함과 기능성을 모두 통합하여 열려 있는 navbar 외부를 클릭하면 원활하게 닫힙니다.

위 내용은 외부 클릭으로 Bootstrap 3 접이식 Navbar를 닫는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!