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

요소 외부를 클릭하여 Bootstrap 3 Navbar 축소

질문: 열려 있는 Bootstrap 3 Navbar 외부를 클릭할 때 어떻게 자동으로 최소화할 수 있습니까? 범위? 기본적으로 navbar-toggle 버튼을 통해서만 열거나 닫을 수 있습니다.

예:

[예 및 코드](링크)

초기 시도:

제공된 내용 코드가 작동하지 않았습니다:

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});

해결책:

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

설명:

이 코드:

• document.
• navbar가 열려 있고 클릭한 요소가 navbar-toggle 버튼이 아닌지 확인합니다.
• 두 조건이 모두 충족되면 navbar-toggle 버튼 클릭을 효과적으로 시뮬레이션합니다. navbar를 축소합니다.

이 접근 방식은 navbar의 애니메이션을 보존하고 더 많은 이점을 제공합니다. CSS 클래스를 수동으로 설정하는 것보다 사용자 친화적입니다.

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