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

Content overlay when responsive menu is opened OR closed

本文关键字：覆盖 菜单 响应      更新时间：2023-09-26

这是一个后续问题：当响应菜单打开时，覆盖Bootstrap 3站点中的内容区域

我做到了，但当再次单击菜单或调整窗口大小时，覆盖不会消失。我不知道该怎么做。

这是点击前的导航栏按钮：

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

点击后保持不变：

<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>

我有一个JS，当菜单打开时，它会在内容区域添加一个覆盖层，使其"变暗"

$(".navbar-toggle").click(function(){
    $("<div class='overlay'></div>").appendTo($(".content, .footer").css("position", "relative"));
})

我如何更新JS，以便在第二次单击按钮[折叠]时移除覆盖时，以及/或者在导航仍然打开的情况下调整浏览器窗口的大小？

更新

删除/隐藏窗口上的覆盖重新调整大小我只是使用了一些css：

@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"));
    }
});

这将检查覆盖是否存在，如果存在，将其删除，否则它将创建它。如果你想更进一步，你可以在第一次创建后隐藏并显示它，这对浏览器来说工作量较小（不是很多，但仍然是一个稍微优化的解决方案）

相关文章：