javascript - 使用jQuery显示/隐藏菜单

我有一个页面，其中包含内容（左侧）和侧边栏（右侧）。对于宽度小于等于480像素的屏幕，将2个div放在另一个下方（100％宽度）。可见的“显示/隐藏”按钮用于在单击时切换边栏的可见性。我用

$(".sidebar .box").slideToggle(200);

以此目的。

在jsfiddle上一起查看所有内容。

问题：如果我切换到宽屏，然后又回到窄屏（宽度
我的错误在哪里？

谢谢！

最佳答案

这样的东西？ http://jsfiddle.net/jqdvj42u/3/

$(document).ready(function() {
     $("a.expander").click(function () {
        $(this).toggleClass('close');
        $(".sidebar .box").slideToggle(200);
    });
});

function showSidebar() {
    if ($(window).width() <= 480) {
        // Close sidebar when window width <= 480px
        $(".sidebar .box").removeClass('open');
        // Click expander button to show/hide sidebar

    } else {
        $("a.expander").removeClass('close');
        // Open sidebar when window width > 480px;
        $(".sidebar .box").addClass('open');
    }
}
showSidebar();

$(window).resize(showSidebar);

您的点击不应在showSidebar()中调用，因为每次调用该函数时，它将绑定click事件。调整大小会触发showSidebar()多次，因此单击被绑定多次。同样，您应该使用jQuery 1.11作为最低版本，因为它的最新版本在IE