How to close an open collapsed navbar when clicking outside of the navbar element in HTML site?

Question

How can I close an open collapsed navbar on clicking outside of the navbar element? Currently, the only way to open or close it is by clicking on the navbar-toggle button.

See here for an example and code:

So far, I have tried the following which doesn't seem to work:

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

But the above method is not working

Answer 1

the easiest way would be to attach a click eventlistener to the body tag.

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

Answer 2

You can define a function and call on mouseleave . Here is an example:

 function showMeTheMoney() { $('.treasure').toggle(); }

 .treasure { background:blue; color:white width:100px;height:50px; position:absolute;bottom:0;right:0; display:none; } div { height:200px;width:200px; } .somespan { width:100px; height:100px; background:yellow; color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span class="somespan" onmouseleave="showMeTheMoney();">Hover this red span and leave it with your mouse to reveal the treasure</span> <span class="treasure">The treasure is found.</span> </div>

Answer 3

You should add an event listener on the document and check if the click is outside the navbar:

// listen to clicks in document
document.addEventListener("click", (evt) => {
    let targetElement = evt.target;
    const navbar = document.querySelector('.navbar-collapse');
    const navbarToggler = document.querySelector('.navbar-toggle');
    
    do {

        // open menu when click is on toggle button and menu does not have the 'in' class
        if (targetElement == navbarToggler && ! navbar.classList.contains('in')) {
            navbar.classList.add('in');
            return;
        } 
        
        // do nothing when clicked in navbar
        else if (targetElement == navbar) {
            return;
        }

        // Go up the DOM
        targetElement = targetElement.parentNode;

    } while (targetElement);

    // when clicked outside of navbar
    navbar.classList.remove('in');
});