javascript - 类似于输入中的子菜单，单击并在失去焦点时将其关闭

Question

我正在尝试执行类似输入单击子菜单之类的操作，并在使用 jQuery 失去焦点时关闭它。 只能使用 mouseup 来完成，如下所示:

$(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');
   }
});

这是我的结果: http://jsfiddle.net/Lwfhbdmp/8/

这工作正常，但我认为它太复杂了，也许有一个更简单的解决方案？ 请帮忙。

Answer 1

jsFiddle demo

更清洁的解决方案:

$(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");
    });

});

...您甚至可以使用 ESC 关闭 $submenu

<子> How to close-hide DIV clicking outside of it (but not inside)