jQuery hiding a div on click outside
- by Lee
Hi All
I would like to build a simple menu for each list element clicked on but hide this div once you click outside it. Here is some simple code which hopefully will make sense.
$('.drillFolder').click(function(){
var id = $(this).attr('data-folder');
$(".drillDownFolder ul li > a").attr('data-id', id);
$(".drillDownFolder").show();
});
$("body").click(function(e){
if(e.target.className !== "drillDownFolder")
{
$(".drillDownFolder").hide();
}
});
//The hidden div
<div class="drillDownFolder" style="display:none">
<ul>
<li><a href="#" data-id="">Show Image</a></li>
<li><a href="#" data-id="">Edit Image</a></li>
</ul>
</div>
I know whats wrong as the menu is show via the .drillFolder links the body click is then hiding it straight away. How can I avoid this.
Thank you if you can advise
