Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

#93786
Mottie
Moderator

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

});