javascript - Close sidebar on click outside

Question

I'm working a site using this Bootstrap example, with a simple slide in sidebar navigation.

http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/#

It is slightly modified, so I have a button for the menu to open:

// Opens the sidebar menu
 $("#menu-toggle").click(function (e) {
    e.preventDefault();
       $("#sidebar-wrapper").toggleClass("active");
 });

And a button for the menu to close:

// Closes the sidebar menu
   $("#menu-close").click(function (e) {
       e.preventDefault();
       $("#sidebar-wrapper").toggleClass("active");
   });    

I want to add functionality, so it will close if I click anywhere outside the sidebar. So far I have this:

// Close the menu on click outside of the container  
$(document).click(function (e) {

            var container = $("#sidebar-wrapper");

            if (!container.is(e.target) // if the target of the click isn't the container...
                && container.has(e.target).length === 0 // ... nor a descendant of the container
                && event.target.id !== "menu-toggle")  // for the functionality of main toggle button
            {
                container.removeClass("active");
            }
     });

But it seems to remove the "active" class this way.

Best regards.

Answer 1

So the solution should be that if you click anywhere inside the container the click handler should do nothing and just return. But if the click is outside the container then it should close it.

Below is the click handler code which might help you.

 $(document).click(function(e) {
      var node = e.target;
       // loop through ancestor nodes to check if the click is inside container.
       // If yes then return from the handler method without doing anything 
       while(node.parentNode) {
         if (node === container) {
           return;
         }
         node = node.parentNode;
       }

       container.removeClass('active')
     });