Закрыть расширенную панель навигации при нажатии за пределами ее элемента

Question

Я занимаюсь разработкой навигационной панели. Я пытаюсь закрыть расширенную навигационную панель при нажатии за пределами ее области. Но проблема в том, что она закрывается только при нажатии кнопки переключения навигационной панели.

Я пробовал разные JQ-запросы, но все они не будут работать.

Jquery:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(" header .navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggler")) {
            $("button.navbar-toggler").click();
        }
    });
});

HTML:

<nav class="navbar navbar-expand-md navbar-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Internet</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">TV</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Wireless</a>
            </li>
            <li class="nav-item">
                <a class="nav-link about" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">FAQs</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="button">
                    <button>GET A QUOTE</button>
                </a>
            </li>
        </ul>
    </div>
</nav>

Пожалуйста, дайте ответы для начальной загрузки 4.