Question

我在Start Bootstrap sidebar template上进行了测试。

模板的jQuery非常简单：

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

我希望侧边栏可以在桌面屏幕上切换，并且在小型设备上进行无遮挡。

这是我尝试做的事情：

$(document).ready(function() {
    $("#menu-toggle").click(function(e) {
        $("#wrapper").toggleClass("toggled");
    });

    function sidebarResize() {
        if ($(window).width() >= 768) {
            $("#wrapper").toggleClass("toggled");
        } else {
            $("#wrapper").toggleClass("toggled");
        }
    }
    sidebarResize();
});

文档加载并且侧边栏被切换，但是当我调整屏幕大小时它没有解开。

我如何实现我想要的目标？

Answer 1

您应该将该函数绑定到窗口调整大小事件..

$(window).resize(sidebarResize);

演示：http://www.codeply.com/go/tDdQm8TrB9

侧栏在较小的屏幕上解开

1 个答案: