单击导航栏外部时如何关闭导航栏

Question

如何编辑我的代码，使导航栏在其外部单击时关闭，但在其内部单击时保持打开状态？

$(document).ready(function() {
  $('.nav-btn').on('click', function() {
  $('.nav-btn').removeClass('active');
    $(this).parent().find('.sub-menu').slideToggle();
    $(this).toggleClass('active');
  });
});

Answer 1

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

Answer 2

$(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。