Close sidebar on click outside

问题

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.

回答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')
     });

回答2:

Try this

$(document).click(function (e)
{
    var container = $("#wrapper");

    if (!container.is(e.target) && container.has(e.target).length === 0 && event.target.id!=="menu-toggle")
    {
        container.addClass("toggled"); 
    }
});

So what basically it is doing is if e is element you want to toggle the class and if the clicked e is also that then the class wil not toggle otherwise it will.

回答3:

You can use a recursive function that check if a element clicked exists in cointainer from sidebar menu:

    function hasElement(node, element) {
        return node == element 
            || (node.childNodes || []).length && Array.from(node.childNodes)
                .filter(x => x.nodeType == 1)
                .some(x => hasElement(x, element));
    }

    $('body').click(function (event) {
        var container = Array.from($("#sidebar")); //Add another containers that would be clicked wihtout close sidebar
        var exists = container.some(node => hasElement(node, event.target));
        if (!exists)
            //TODO Close sidebar here...
    });

来源：https://stackoverflow.com/questions/28669033/close-sidebar-on-click-outside