Question

I am trying to create a jQuery click function that will close a div when you click on anything besides that div. My problem is that there is a search field and another button inside that div that need to stay open if you click on them.

My current function is:

$("*:not(#header)").click(function() {
    $('#header').slideUp({
        duration: 550, 
        easing: 'easeOutExpo'
    });
});

I want to also say “and is not ‘#categoryMore’ and is not ‘#headerSearch'” but the syntax I’ve been using have not been working.

$("*:not(#header, #categoryMore, #headerSearch)")

and

$("*:not(#header), *:not(#categoryMore), *:not(#headerSearch)")

Any ideas? Thanks so much for your help!

Answer 1

EDIT:

Here’s an example you can test. http://jsfiddle.net/yvFcz/

I used slideToggle() for the example so you can more easily test it more than once.

---

Put a handler on the document that closes #header.

Then place a handler on #header that does event.stopPropagation() to prevent the event from bubbling up to the document when you click inside it.

$(document).click(function() {
    $('#header:visible').slideUp({
        duration: 550, 
        easing: 'easeOutExpo'
    });
});

$('#header').click(function( event ) {
    event.stopPropagation();
});

• http://api.jquery.com/event.stopPropagation

Note that if any other elements on the page has a click handler that uses event.stopPropagation() or return false;, the event won’t bubble up to the document, and your #header won’t close.

In that case, you would need to handle it directly in that handler.