Here is the jquery code I am using to show and hide my menus.
jQuery(window).load(function () {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").hide(); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").hide(); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").find("*").slideDown(200);
}
}
});
});
Currently, to hide the drop downs the viewer must click back on the menu heading. I would like to add the function where if they click anywhere else on the page then the menu will hide.
I have read the usual answers but am having trouble integrating them AND properly removing the "selected" class.
I've put everything in jsFiddle here, but unfortunately the code doesn't work on jsFiddle (menus don't drop down). It does, however, work on my live pages when I upload them. Anyone answers as to why that might be would also be helpful and probably get a final solution faster.