Question

以下是Overlay content areas in Bootstrap 3 site when responsive menu is opened

的后续问题

我得到了它，但是当再次单击菜单或调整窗口大小时，叠加层不会消失。我不确定如何实现这一点。

点击它之前是导航栏按钮：

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

Answer 1

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

    if ( overlay.length > 0 ) {

        overlay.remove();
    } else {

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

});

这将检查覆盖是否存在，如果是，则删除它，否则它将创建它。如果你想更进一步，你可以隐藏并在第一次创建后显示它，这对于浏览器来说不那么重要（不是很多但是仍然是一个稍微优化的解决方案）我会留给你发现怎么做=]

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

1 个答案: