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

외부 클릭 시 접힌 Navbar 닫기

Bootstrap 3에서 지정된 영역 외부를 클릭할 때 접힌 Navbar를 닫으려면 다음 해결 방법을 사용할 수 있습니다. 구현됨:

이 작업은 탐색 모음 너머의 사용자 클릭을 감지하는 메커니즘을 설정하는 것입니다. 요소를 탐색하고 탐색 모음을 닫습니다. jQuery(document).click(function()) 및 jQuery('.navbar').click(function())을 사용한 초기 시도는 이 목표를 달성하지 못했습니다.

수정된 접근 방식은 클릭 이벤트를 통합합니다. 문서 요소에 대한 리스너:

$(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();
        }
    });
});

이 코드에서 clickover는 클릭이 발생한 요소를 결정합니다. _opened는 navbar가 현재 축소되어 열려 있는지 확인합니다. 그런 다음 탐색 표시줄이 열려 있고 토글 버튼 외부에서 클릭이 발생한 경우 버튼이 프로그래밍 방식으로 클릭되어 탐색 표시줄이 닫힙니다.

이 솔루션은 부드러운 축소 애니메이션을 구현하고 클릭 이벤트가 기본 요소를 사용하여 경계 외부를 클릭하면 탐색 표시줄이 닫히도록 합니다.

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