Side panel to close when I close anywhere outside it

Question

I have left panel which slides in as I press the menu button (it is a mobile version). When the left panel slides in, I want it to close when I click anywhere else except the left panel itself. The jquery I made is this:

$(document).ready(function(){
        $('.menu').click( function() {

    if ($('.sidemenuu').hasClass('hidden')) {
       $('.sidemenuu').animate({left:"0%"},255);
    $('.sidemenuu').removeClass('hidden');
    return true;
    }
    else {
    if($('.sidemenuu').css("left","0")){
                alert('jkk');
                $('html').click(function() {
        $('.sidemenuu').animate({left:"-80%"},255);
    });
        }

        $('.sidemenuu').addClass('hidden');
        $('.sidemenuu').animate({left:"-80%"},255);

    }
});

$('.close').click(function(){

        $('.sidemenuu').animate({left:"-80%"},255).addClass('hidden');
        //$('.sidemenuu').addClass('hidden');
            });

            $('.sidemenuu').click(function(e){


            });

        });

html:

<div class="sidemenuu hidden">

<div class="close"></div>
    <div class="over-y-auto">   
    <div data-role="content">   

            <div id="getVerificationSearchList" >    

                <button  onClick="getVerificationSearchList()">Verification Data</button>

            </div>

            <div id="getNewHomeLoan" >    

                <button onClick="getNewHomeLoan()">New Home Loan</button>


            </div>

            <div id="getNewLoan" >    

                <button onClick="getNewLoan()">New Loan</button>


            </div>

            <div id="getContactRecording" >    

                <button onClick="getContactRecording()">Contact Recording</button>

            </div>

            <div id="getCPU" >    

                <button onClick="getCPU()">CPU</button>

            </div>

            <div id="getphotoupload" >    

                <button onClick="getimageupload()">Photo Upload List</button>

            </div>

            <div id="getdocumentupload" >    

                <button onClick="getdocumentupload()">Document Upload List</button>

            </div>


            <div id="getreceiptupload" >    

                <button onClick="getreceiptupload()">Receipt List</button>

            </div>

         </div>
     </div>
</div>

css:

 .sidemenuu{   background-color: #181818;
height: 100%; left: -40%;
position: relative;
box-shadow: 9px 0 10px #303030;
position: fixed;
border-right: solid 1px #444;
 padding: 1%;
width: 75%;
left: -80%;

z-index: 10;}

.over-y-auto{ overflow-y: auto; height: 100%;}

.sidemenuu button{ background-color: #141414;
border-bottom: solid 1px #000 !important;
border-left: 0;
border-right: 0;
border-top: solid 1px #171717 !important;
color: #565656;
height: 55px;
width: 98%;
font-size: 18px;
}
.sidemenuu button:hover{ background-color: #202020; box-shadow: 0 0 7px #000 inset;}


.close { background: url("img/close.png") no-repeat scroll center 5px #252525;
border: solid 1px #333;
border-radius: 4px;
cursor: pointer;
height: 40px;
margin: 0 auto 19px;
padding: 0;
width: 73px;
}

.menu{ cursor: pointer;  left: 0;
    position: absolute;}

fiddle is here: http://jsfiddle.net/cLJVV/

Answer 1

This is a fairly common and potentially tricky problem. You'd like to bind to any click 'outside' your element, but DOM events don't work that way. Every click is inside something, and that's what's going to receive the event and bubble it up the DOM.

So, the way to solve this is to listen to clicks on the document itself, and check whether those clicks are inside the element you want to detect clicks outside of (your sidebar). If the clicks made it all the way to the document without passing through your element, they are outside. The simplest function to check for that would look like this:

var openSidebar = function(){
    $('.sidemenuu').removeClass('hidden').animate({left:"0%"},255);
}
var closeSidebar = function(){
    $('.sidemenuu').addClass('hidden').animate({left:"-80%"},255);
}

$('.menu').click( function(event) {
    event.stopPropagation();
    openSidebar();
});
$(document).click( function(event){
    if ( !$(event.target).closest('.sidemenu').length ) {
        closeSidebar();   
    }
});

See updated fiddle here: http://jsfiddle.net/cLJVV/2/

Note one really important thing: in the .menu click function, the first line is calling event.stopPropagation(). This call stops the event from continuing to bubble up to the root of the document.

Recall that the click binding on the document is going to catch all clicks, and any clicks that didn't originate inside your side menu element will call the function to close it. So, if you have an element that is outside and you don't want that element to trigger your sidemenu to close, you need to stop propagation of clicks on that element. In this case, that's what I did to the menu button on your fiddle.

Hope this helps!

Answer 2

Why not use the focusout event handler.

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

Example:

$('.close').click(function () {

    $('.sidemenuu').animate({
        left: "-80%"
    }, 255).addClass('hidden');
    //$('.sidemenuu').addClass('hidden');
});


$('.sidemenuu').focusout()(function () {

    $('.sidemenuu').animate({
        left: "-80%"
    }, 255).addClass('hidden');
    //$('.sidemenuu').addClass('hidden');
});

You can also use a separate function for both as they do the same thing.

Example:

$('.close').on( "click", closeSidemenu )
$('.sidemenuu').on( "focusout", closeSidemenu )

function closeSidemenu() {

        $('.sidemenuu').animate({
            left: "-80%"
        }, 255).addClass('hidden');
        //$('.sidemenuu').addClass('hidden');

}

Either way is valid, but the second one is easier to maintain, requires less code, and is easier to troubleshoot.