Question

我的页面中有很多容器，用户希望能够使用ESC键关闭它。

是否有任何动态方法来识别它的第一个容器（如最高的z-index），以防我有多个容器打开？

我这样做的方式非常有趣/丑陋。

我认为，我重新发明了轮子。

我的js：

$(document).bind('keydown', function(e) { 
    if (e.which == 27) {

        if($("#container1").css("display") == "block"){
                // this is a sub-container inside the container1
                if($("#subContainer1").css("display") == "block"){
                    $("#subContainer1").fadeOut();
                }else{
                    $("#container1").stop(true,true).fadeOut('fast');
                }

        }else if($("#container2").css("display") == "block"){
               // this is a sub-container inside the container2
                if($('#subContainer2').css("display") == "block"){
                    $("#subContainer2").fadeOut();
                }else{
                    $("#container2").stop(true,true).fadeOut('fast');
                }
        }
    }
});

还有其他任何明智的方法吗？

谢谢！

Answer 1

搜索所有容器。找到z-index最高的那个。在keydown事件触发时隐藏那个。

$(document).bind('keydown', function(e) { 
    if (e.which == 27) {

        zindex = 0;
        zelem = null;

        $('.container').each(function(){
           thisindex = $(this).css('z-index');
           if(thisindex > zindex) {
               zindex = thisindex;
               zelem = $(this);
           }
        });

        zelem.hide() // or whatever
    }
}

Answer 2

我做了一些改变：

$(document).bind('keydown', function(e) { 
    if (e.which == 27) {

        eventHold = null;
        $('.escSuporKey').each(function(){
           thisdisplay = $(this).css('display');
           if(thisdisplay === "block") {
               eventHold = $(this);
           }
        });
        eventHold.fadeOut() // or whatever
    }
});

关闭容器与关键事件

2 个答案: