JQuery: Hide a div if anything except the div and its content is clicked

[bennyjien]

Hi,

Can someone please help me with his?
I want to hide a div when anything except the div and its content is clicked.
How do I do this?

Thanks a lot.

[itsjustjake]

can you post some code for an example??

Is this a modal that your trying to close that is being overlayed?

[bennyjien]

Please visit miamiurbanist.com.

There is a green menu bar below the main navigation bar.
When you click on the Neighborhood menu for instance, there will be a pop up div showing up. To hide/close this div, currently you must click the Neighborhood menu again.

What I want to do is any clicks except on the div and its content, will hide/close the pop up div.

Thanks for your response.

[Mottie]

You could use hover instead; change this function in your scripts.js file:

/* custom scripts */

$(document).ready(function() {



$('#second-nav > li').hover(function(){

$(this).siblings('li.selected').removeClass('selected').children('div').stop(true, true).fadeOut(250);

$(this).addClass('selected').children('div').stop(true, true).fadeToggle(250);

}, function(){

$('#second-nav > li').removeClass('selected').children('div').stop(true, true).fadeOut(250);

});



});

But if you must have it as a click, try this code:

/* custom scripts */

$(document).ready(function() {



$('#second-nav > li > span').click(function(){

$(this).parent('li').siblings('li.selected').removeClass('selected').children('div').stop(true, true).fadeOut(250);

$(this).parent('li').toggleClass('selected').children('div').stop(true, true).fadeToggle(250);

});

$(document).click(function(e){

// not an optimal use of selectors, but it works

if ($(e.target).parentsUntil('#second-nav')[0] !== $('#second-nav').find('li.selected')[0]) {

$('#second-nav > li').removeClass('selected').children('div').stop(true, true).fadeOut(250);

}

});



});

[bennyjien]

Thank you very much, Mottie.
This really helps!

[gozonjoedaimar]

I found this useful…

jQuery(document).click(function(event){
    // Check if clicked outside .target-div
    if (!(jQuery(event.target).closest(".target-div").length)) {
        // Hide .target-div
        jQuery(".target-div").hide();
    }
});

[Author]

Posts