菜單點擊事件不工作在jQuery覆蓋窗口

Question

所以，我有一個菜單的側面，這是始終可見的，我絕對定位在頁面的另一側的覆蓋窗口。

我想出了作品很好，當我點擊鏈接在菜單中打開另一個重疊窗口的代碼，除了

1. ，以前的覆蓋不是封閉的，因此點擊覆蓋不顯示（除非我點擊其他地方，並關閉它） - 我知道我應該爲點擊綁定一個關閉事件，我只是不知道如何..

2. 它太長，但我不知道如何以簡化它..

3. 我會a也希望使它自動化，以便我可以包含儘可能多的頁面（li元素），而不必將這些覆蓋的id添加到jquery代碼中。

的HTML如下：

<div class="overlay" id="aoverlay"></div> 
<div class="overlay" id="boverlay"></div> 
<div class="overlay" id="coverlay"></div> 

和相應的菜單鏈接：

<ul class="nav"> 
    <li id="a"><a href="#">Overlay-window-1</a></li> 
    <li id="b"><a href="#">Overlay-window-2</a></li> 
    <li id="c"><a href="#">Overlay-window-3</a></li> 
</ul> 

jQuery代碼是：

$(document).ready(function(){ 

$(".overlay").css("height", $(window).height()); 

$("#a").click(function(){ 
    $("#aoverlay").fadeIn(); 
    $("body").css('overflow', 'hidden'); 
    $(".overlay").css('top', $(window).scrollTop()); 
    return false; 
}); 

$("#b").click(function(){ 
    $("#boverlay").fadeIn(); 
    $("body").css('overflow', 'hidden'); 
    $(".overlay").css('top', $(window).scrollTop()); 
    return false; 
}); 

$("#c").click(function(){ 
    $("#coverlay").fadeIn(); 
    $("body").css('overflow', 'hidden'); 
    $(".overlay").css('top', $(window).scrollTop()); 
    return false; 
}); 

$(document).click(function(event) { 
    if($(event.target).closest('.logo, .nav, .reference').length == 0) { 
     $("#aoverlay, #boverlay, #coverlay,").fadeOut(); 
     $("body").css('overflow', 'visible'); 
     $(".overlay").css('top', '0'); 
     return false; 
    }   
}) 

}); 

$(window).bind("resize", function(){ 
    $(".overlay").css("height", $(window).height()); 
}); 

謝謝你的任何幫幫我！ （請記住，我對jquery很新）

Answer 1

這是我的解決方案（不是最簡單的，但是回答問題1和3）。

如果你知道一個簡單的解決方案，隨時分享:)

$(document).click(function (event) { 

var overid = ('#' + event.target.id + 'overlay'); 
var jt = ('#' + $('.overlay.open').attr('id')); 

if (($(event.target).parent('.nav li').length === 1) && ($(event.target).closest('#regular-link').length === 0)) { 

    if ($(overid).hasClass('open')) { 
     $(overid).removeClass('open'); 
     $(overid).delay(500).fadeOut(); 
     $("body").css('overflow', 'visible'); 
     $(".overlay").css('top', $(window).scrollTop()); 
     event.preventDefault(); 

    } else { 

     if ($(overid).not('open') && (jt === '#undefined')) { 
      $(overid).delay(500).fadeIn(); 
      $(overid).addClass('open'); 
      $("body").css('overflow', 'hidden'); 
      $(".overlay").css('top', $(window).scrollTop()); 
      event.preventDefault(); 

     } else { 

      $(jt).removeClass('open'); 
      $(jt).fadeOut(); 
      $("body").css('overflow', 'visible'); 
      $(overid).delay(500).fadeIn(); 
      $(overid).addClass('open'); 
      $("body").css('overflow', 'hidden'); 
      $(".overlay").css('top', $(window).scrollTop()); 
      event.preventDefault(); 
     } 
    } 

} else { 

    if (($(event.target).closest('.nav, .no-close').length === 0) && $(jt).hasClass('open')) { 
     $(jt).removeClass('open'); 
     $(jt).fadeOut(); 
     $("body").css('overflow', 'visible'); 
     $('.overlay').css('top', '0'); 
    } 
} 
}); 

我還創建了一個JSFiddle這裏。

該腳本負責處理頁面的溢出（滾動條），並在導航菜單中定期鏈接。