외부 클릭 시 Bootstrap Navbar를 닫는 방법은 무엇입니까?

Bootstrap을 사용하여 외부 클릭 시 열린 Navbar 닫기

Bootstrap 3에서 축소된 Navbar로 작업할 때 닫을 수 있으면 유용합니다. 탐색 모음 영역 외부를 클릭하면 됩니다. 이를 달성하려면 다음 JavaScript 코드를 사용할 수 있습니다.

$(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 요소 외부의 클릭을 감지하면(clickover 변수에 의해 결정됨) navbar가 현재 열려 있는지(_opened) 확인합니다. navbar가 열려 있고 클릭한 요소가 "navbar-toggle" 버튼이 아닌 경우 토글 버튼 클릭을 트리거하여 navbar를 효과적으로 닫습니다.

제공하신 코드 스니펫은 작동하지 않습니다. navbar를 닫기 전에 이미 열려 있는지 확인하지 마십시오. 또한 jQuery('.navbar').click(...)을 사용합니다. 이 기능은 탐색 모음 내에서 클릭할 때도 실행되어 외부 클릭으로 탐색 모음이 닫히는 것을 방지합니다.

답을 얻으려면 열려 있는 탐색 모음 외부를 클릭할 때 열려 있는 탐색 모음이 닫히도록 하여 사용자 경험과 탐색 흐름을 향상시킬 수 있습니다.

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