javascript - 单击 HTML 站点中的导航栏元素外部时如何关闭打开的折叠导航栏？

Question

如何在导航栏元素外部单击时关闭打开的折叠导航栏？目前，打开或关闭它的唯一方法是单击导航栏切换按钮。

参见 here示例和代码:

到目前为止，我已经尝试了以下似乎不起作用的方法:

$(document).ready(function () { 
    $(document).click(function () {
        // if($(".navbar-collapse").hasClass("in")){
            $('.navbar-collapse').collapse('hide');
        // }
    });
});

但是上面的方法不行

Answer 1

最简单的方法是将点击事件监听器附加到 body 标签。

document.body.addEventListener('click', (e) => {
    if($(".navbar-collapse").hasClass("in")){
        $('.navbar-collapse').collapse('hide');
    }  
})