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

[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);

}

});



});