The scenario involves imitating a drop down list. Instead of the standard input select element, we’re using a set of custom images in combination with a few CSS styles and jQuery behaviors.
All in all, we have a drop down list that works just fine. The question revolves around a drop down list losing focus. A normal select element losing focus would automatically close the list, however, since we are using a set of divs, it’s not possibly to set or lose focus(and subsequently hide the list).
We’ve been able to imitate normal drop down behavior by hiding a text input behind the div and setting the focus to it dynamically. For example:
User clicks drop down list -> content list is displayed and hidden text input is set as focus.
Event is bound to the text input losing focus which hides the content list.
I’m curious if the community has a better approach to hiding a div when a user clicks off, presses escape, etc.
I guess you could get the desired behavior by wisely using the jQuery outside events plugin.