Javascript 打开或关闭响应菜单时的内容覆盖

这是一个以下问题：

我得到了工作，但覆盖不会消失时，再次单击菜单或窗口的大小调整。我不知道怎样才能做到这一点

以下是单击导航栏按钮之前的导航栏按钮：

<button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target=".navbar-collapse">...</button>

$（“.navbar toggle”）。单击（函数（）{
var overlay=$（'.overlay'）；
如果（overlay.length>0）{
覆盖。删除（）；
}否则{
$（“”）.appendTo（$（“.content，.footer”）.css（“位置”，“相对”）；
}
});

这将检查覆盖是否存在，如果存在，将其删除，否则将创建它。如果您想更进一步，您可以在第一次创建后隐藏并显示它，这对浏览器来说是一个较少的工作（不是一吨，但仍然是一个稍微优化的解决方案），我将让您自己来发现如何做=]

<button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target=".navbar-collapse">...</button>

<button type="button" class="navbar-toggle collapsed" 
data-toggle="collapse" data-target=".navbar-collapse">...</button>

$(".navbar-toggle").click(function(){

    $("<div class='overlay'></div>").appendTo($(".content, .footer").css("position", "relative"));

})

@media (min-width: 768px) {div.overlay {visibility:hidden;}}

$(".navbar-toggle").click(function(){
    var overlay = $( '.overlay' );

    if ( overlay.length > 0 ) {

        overlay.remove();
    } else {

        $("<div class='overlay'></div>").appendTo($(".content, .footer").css("position", "relative"));
    }

});