用關鍵事件關閉容器

Question

我的頁面中有很多容器，用戶希望能夠使用ESC鍵關閉。

是否有任何動態的方式來確定哪些容器的第一個（如最高Z指數），以防萬一我有更多的一個打開？

我這樣做的方式非常有趣/醜陋。

我想重新發明輪子。

我的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

我做了一些改變的：

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

Answer 2

搜索所有容器。找到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 
    } 
}