Javascript JQuery单击类以附加和删除覆盖

因此，我对Jquery（以及为此编写的代码）非常陌生，我正在尝试这样做：

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

用户应该能够单击覆盖，关闭子菜单并删除覆盖。他们也应该能够通过点击主菜单项来做同样的事情。I类将分配具有子菜单项的菜单项为“.jrm菜单类别”，请参见下面的代码：

//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菜单类别'）。单击（函数（）{
$（'wrap#u all'）。附加（''）；
$（'#overlay-2'）。法代因（300）；
});
//单击覆盖时删除覆盖
$（函数（）{//document.ready速记
$（文档）。在（'单击'，'覆盖-2'，函数（）上{
$（“#overlay-2”）.fadeOut（'3000'，function（）{//使用3000代替300m
$（'#overlay-2'）。删除（）；
});    
返回false；
});
});

我怎样才能达到我上面提到的目标？我被难住了

提前感谢

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

嘿，谢谢大家的回答，伙计们！不过，也许我需要澄清一下。我已经能够删除叠加时，点击它。但是，我试图将覆盖链接到“.jrm菜单类别”类，反之亦然

因此，当单击该类时，将弹出覆盖。（在我的开发网站上，还会弹出一个子菜单，它的z索引比覆盖图的高）。这就是我要做的。单击覆盖时，菜单应关闭，覆盖应隐藏。我还想要的另一种方法是，如果单击了类的原始菜单，那么菜单应该关闭，覆盖应该隐藏。 我希望这是有道理的

我认为.toggle可以工作，因为我无法向类中添加另一个click函数来关闭覆盖，因为它们相互抵消。但我不知道如何使用切换功能

---

再次感谢！这里帮了大忙！：）

使用以下命令刷新代码：

//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;
    });
});

//将覆盖层添加到主体并淡入。
$（'.jrm菜单类别'）。单击（函数（）{
$（'#wrap_all'）.append（''.hide（）.fadeIn（300）；
});
//单击覆盖时删除覆盖
$（函数（）{//document.ready速记
$（文档）。在（'单击'，'覆盖-2'，函数（）上{
$（“#overlay-2”）.fadeOut（'3000'，function（）{//使用3000代替300m
$（this.remove（）；
});    
返回false；
});
});

不要删除覆盖菜单，而要在jquery中使用

hide（）

试试这个代码

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

$（'.jrm菜单类别'）。单击（函数（）{
$（'wrap#u all'）。追加（'overlay'）；
$（'#overlay-2'）。法代因（300）；
});
$（文档）.ready（函数（）{
$（文档）。在（'单击'，'覆盖-2'，函数（）上{
$（'#overlay-2'）。淡出（'3000'，函数（）
{
$（'#overlay-2'）。删除（）；
});    
返回false；
});
});

或者参考这把小提琴：

---

如果一个覆盖应该打开多次，最好始终保持在页面底部。与其创建和删除div，不如显示/隐藏div

以下是一个例子：

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

JS:

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

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

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

---

jsfiddle:

你能为它提供一把小提琴吗？如果你需要的话，你甚至可以使用$（'#overlay-2'）.hide（）。

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

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