Hide Dropdown list when clicking outside

If you are working on menu creation or anything interactive and your need is to automatically close drop-down as soon as you click anywhere on your page, you can achieve the same by using below code via jQuery:


//below line will automatically hide dropdown list containing ID dropdown
$(document).click(function(){
$("#dropdown").hide();
});

// obviously, we don't want list to be closed on any click happening
//inside list so below code will kill that even to trigger document's click.

$("#dropdown").click(function(e){
e.stopPropagation();
});

Please share your thoughts/queries. Thanks

Happy Coding!!

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>