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

Question

I'm trying to do something like submenu on input click and close it on losing focus with jQuery. Only accomplished using mouseup like 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 is my results: http://jsfiddle.net/Lwfhbdmp/8/

this works OK, but I think it's too complex and maybe there is a simpler solution for this? Please help.

score 1 · Accepted Answer · edited May 23 '17 at 12:29

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. From now on, whenever you desire to
    // reference to the currently active 'submenu'
    // simply use the $submenu variable:

    $(".btn-inside").on("click", function(){
        alert("Clicked");
        $submenu.removeClass("submenu");
    });

});

...and you can even use ESC to close the $submenu

_{How to close-hide DIV clicking outside of it (but not inside)}

yes it works but in console I'm getting an error: "Uncaught TypeError: Cannot read property 'removeClass' of undefined" — user1844923, Oct 23 '15 at 09:01
another question is, why the $container variable is unused ? — user1844923, Oct 23 '15 at 11:42

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

1 Answers1