Question

I have a customized dropdown in html coded in “ul” and “li”, I show options when a user clicks on the head of “ul” I would like to hide these elements when the user clicks outside the menu area.

Is something like this possible with javascript/YUI not Jquery?

Answer 1

I’m not a YUI guy, so I suspect this could be written a bit better, but I have tested it and it works.

Hide the dropdown anytime the document is clicked:

Y.one(document).on("click", function(){
    Y.one("#menu").hide(); 
});

Prevent clicks on the ul from propagating to the document:

Y.one("#menu").on("click", function(e){
    e.stopPropagation();    
});

If the visitor clicks anywhere, the click will bubble up to the document, and hide the menu. If they click on the menu, the event will be prevented from bubbling up to the document, and as such the menu will not be hidden.

Demo: http://jsfiddle.net/nHnZT/