If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

You should never ever use the $('*') selector since this will make a script very slow if the DOM becomes large and complicated because then the script will traverse the whole document and select every element, as irrelevant it may be for the current function (e. g. it will also address meta elements in the head etc.).
What you want is a “click outside” kind of thing and it’s pretty simple. I assume you have two separate elements, one as the trigger (dropdown arrow) and one as the element that is triggered (the dropdown to show/hide).

We define a variable “inside” that is false by default (i. e. pointer is outside of the trigger element’s boundaries). If the mouse hovers over the trigger the variable is set to “true” (i. e. pointer is inside the element’s boundaries). Now, on click anywhere in the page (i. e. the entire document) the dropdown will be hidden but that would also count for the trigger which would fade in and immediately fade out the dropdown again on click, and obviously we don’t want that. We want it to only fade in on click and fade out on a second click. Therefore we check if on click of the document, the the pointer is inside the trigger, so the fadeout will only occur if the pointer is not inside the trigger element’s boundaries. And we toggle the fade separately on click of the trigger. Makes sense?

Also, don’t add CSS with jQuery. Rather, add and remove an HTML class with jQuery, and apply the CSS to that class in a separate stylesheet.