Question

所以，我有一个侧面的菜单，它总是可见的，我在页面的另一侧绝对定位了覆盖窗口。

我提出的代码工作正常，除了

当我点击菜单中的链接打开另一个叠加窗口时，之前的叠加层未关闭，因此未显示点击的叠加层（除非我点击其他地方并关闭它） - 我知道我应该为点击绑定一个关闭事件，我只是不知道如何..
太长了，但我不知道如何简化..

我还想让它自动化，这样我就可以包含尽可能多的页面（li元素）而无需将这些叠加的id添加到jquery代码中。

< / LI>

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。

此脚本负责页面的溢出（滚动条）以及导航菜单中的常规链接。

菜单点击事件不适用于jquery覆盖窗口

1 个答案: