Question

所以我对Jquery很新（并为此编码）我正在尝试这样做：

当在叠加上单击具有子菜单项的菜单项时淡入（创建模态效果），以便焦点位于子菜单上。我已经能够做到这一点，但我不确定在关闭它的最佳途径。

用户应该能够点击叠加层并关闭子菜单并移除叠加层。他们也应该能够通过单击主菜单项来做同样的事情。我将分配具有子菜单项的菜单项的类是“.jrm-menu-categories”参见下面的代码：

//Add our overlay to the body and fade it in.
  $('.jrm-menu-categories').click(function()    {
    $('#wrap_all').append('<div id="overlay-2"></div>');
    $('#overlay-2').fadeIn(300);
    });

// remove overlay when overlay is clicked
$(function(){// document.ready shorthand
    $(document).on('click','#overlay-2',function() {
        $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m
            $('#overlay-2').remove();
        });    
        return false;
    });
});

我如何实现上面提到的？我很难过！

提前致谢!!!

---------------------------更新------------------- ------------

嘿，谢谢你们的所有答案！但是，也许我需要澄清一下。我已经能够在单击时删除叠加层。但是我试图将叠加层链接到“.jrm-menu-categories”类，反之亦然。

因此，当单击该类时，将弹出叠加层。（在我的开发网站上，还弹出一个子菜单，其z-index比叠加更高）。现在这就是我想要做的。单击叠加层时，菜单应关闭，叠加层应隐藏。我还想要的另一种方法是，如果单击该类的原始菜单，则应关闭菜单并隐藏叠加层。我希望这是有道理的。

我当时认为.toggle会起作用，因为我无法在课程中添加另一个点击功能以关闭叠加层，因为它们互相取消。但我不知道如何使用切换功能。

再次感谢！在这里帮助很大！：）

Answer 1

使用以下内容刷新您的代码：

//Add our overlay to the body and fade it in.
  $('.jrm-menu-categories').click(function()    {
    $('#wrap_all').append('<div id="overlay-2"></div>').hide().fadeIn(300);
    });

// remove overlay when overlay is clicked
$(function(){// document.ready shorthand
    $(document).on('click','#overlay-2',function() {
        $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m
            $(this).remove();
        });    
        return false;
    });
});

Answer 2

请勿删除叠加菜单，而不要在jquery中使用hide();

   $(function(){
        $(document).on('click','#overlay-2',function() {
            $('#overlay-2').fadeOut('3000',function(){//use 3000 in place of 300m
                $('#overlay-2').hide();
            });    
            return false;
        });
    });

Answer 3

试试这段代码。

$('.jrm-menu-categories').click(function()    {
$('#wrap_all').append('<div id="overlay-2">overlay</div>');
$('#overlay-2').fadeIn(300);
});


$(document).ready(function(){
    $(document).on('click','#overlay-2',function() {
        $('#overlay-2').fadeOut('3000',function()
        {
            $('#overlay-2').remove();
        });    
            return false;
        });
    });

或者参考这个小提琴：

Working Fiddle

Answer 4

如果覆盖层应该多次打开，最好始终将其保留在页面底部。而不是创建和删除div，显示/隐藏将更好地做到这一点。

这是一个例子：

<div id="wrap_all">
    <a href="#" class="jrm-menu-categories">Click Here</a>
</div>
<div id="overlay"></div>

<强> CSS：

#overlay{display:none; height:100%; width:100%; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.4); z-index:100}

<强> JS：

$('.jrm-menu-categories').click(function(e){
    $('#overlay').fadeIn(300);
    e.preventDefault();
});

$(document).on('click','#overlay',function() {
    $(this).fadeOut('3000');
});

jsfiddle：http://jsfiddle.net/M8sqe/

JQuery单击类来追加和删除叠加层

4 个答案: