Question

我尝试在输入点击时执行类似子菜单的操作，并在使用jQuery失去焦点时将其关闭。只使用像这样的鼠标完成：

$(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)

在输入点击时像子菜单一样，在失去焦点时关闭它

1 个答案: