单击导航栏元素外部或单击 Bootstrap 4 中的 link 时如何关闭打开的折叠导航栏？

Question

在 bootstrap 3 中是这样的 =>

$(document).on('click.nav','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).removeClass('in').addClass('collapse');
    }
});

如何在 bootstrap 4 alpha 中执行此操作 5.thanks 这是导航栏 4 的代码笔： http://codepen.io/parlop/pen/BQoNNx

Answer 1

我认为主要是您需要更改 class 名称，例如在代码中我看不到名为 "navbar-collapse":[=11= 的 class ]

$(document).on('click',function(e) {
    if(  $(e.target).attr('class') != 'navbar' ) {
        $('#navbarResponsive').removeClass('in');
    }
});

Answer 2

这个对我有用 Bootstrap 4

    $('body').on('click', function(e) {
        if($(e.target).closest('.navbar').length === 0) {
            // click happened outside of .navbar, so hide
            var opened = $('.navbar-collapse').hasClass('collapse');
            if ( opened === true ) {
                $('.navbar-collapse').collapse('hide');
            }
        }
    });

单击导航栏元素外部或单击 Bootstrap 4 中的 link 时如何关闭打开的折叠导航栏？

How to close an open collapsed navbar when clicking outside of the navbar element or clicking on a link in Bootstrap 4?

navbar

twitter-bootstrap