$(document).ready(function () {
    $('.nav-btn').on('click', function (e) {
        
        // Stop Document to be clicked when clicked in nav.
        e.stopPropagation()

        $('.nav-btn').removeClass('active');
        var subMenu = $(this).parent().find('.sub-menu')
        if (!$(".sub-menu").is(":visible")) {
            $(this).parent().find('.sub-menu').slideToggle();
        }
        $(this).toggleClass('active');
    });

    // Toggle Sub Menu and remove active when Any vacant place is clicked
    $(this).on('click', function (event) {
        $('.nav-btn').removeClass('active');
        $('.nav-btn').parent().find('.sub-menu').slideToggle();
    });

    // Prevent View close when Sub Items is clicked
    $('.sub-menu').on('click', function (e) {
        e.stopPropagation()
    })
});

你好，你只需要防止文档点击时点击导航项，并处理一些额外的事情，如在上面的代码。
您还可以看到Plunker example here。

$(document).on('click', function (event) {
    if ($(event.target).closest('.main-nav').length === 0) {
        // Close button code
    }
});

另一种可能的方法是将所有内容 Package 在另一个div中（除了标题和导航栏），并使用onclick标记：

<div onclick="hideNavbar()">
     all your content goes here
</div>

function hideNavbar() {
   $('.navbar-collapse').collapse('hide');
   // getting the navbar div with jQuery  
  // and calling the function 'hide' of the Bootstrap class 'collapse'
}