javascript - someting like submenu on input click and close it on losing focus -

i'm trying submenu on input click , close on losing focus jquery. accomplished using mouseup this:

$(document).mouseup(function (e){     var container = $(".container");     if (!container.is(e.target)        && container.has(e.target).length === 0        && !$(".input").is(e.target))    {        $('.submenu').removeclass('submenu');    } }); 

here results: http://jsfiddle.net/lwfhbdmp/8/

this works ok, think it's complex , maybe there simpler solution this? please help.

jsfiddle demo

a cleaner solution:

$(function(){      var $submenu,         conthov = 1,         $container = $('.container').hover(function(){ conthov^=1; }); // tog flag on hover      $(document).on('mouseup keyup', function( e ){         if(conthov||e.which==27) $submenu.removeclass("submenu");     });      $(".input").on("click", function(e){         $submenu = $(this).closest("div").toggleclass('submenu');     });      // that's it. on, whenever desire     // reference active 'submenu'     // use $submenu variable:      $(".btn-inside").on("click", function(){         alert("clicked");         $submenu.removeclass("submenu");     });  }); 

...and can use esc close $submenu

_{how close-hide div clicking outside of (but not inside)}