Javascript 如何将断点添加到幻灯片和推送响应菜单

我的网站上有两个菜单。浏览器宽度大于1024px时为水平菜单，浏览器窗口小于1024px时为滑动和推送（右）菜单（我使用的是找到的滑动推送菜单：）

如果浏览器窗口小于1024px，并且我单击了切换按钮，则菜单工作正常，但在菜单打开的情况下，当我将浏览器窗口扩展到大于1024px时，滑动和推送菜单仍然打开，并且我的水平菜单现在也显示出来。我的问题是，使用javascript，当我的浏览器窗口达到1024倍或更大时，如何收回或向后推菜单

这里是指向工作文件的链接

以下是我的菜单的javascript：

var menuRight = document.getElementById('cbp-spmenu-s2'),
    showRightPush = document.getElementById('showRightPush'),
    body = document.body;

showRightPush.onclick = function () {
    classie.toggle(this, 'active');
    classie.toggle(body, 'cbp-spmenu-push-toleft');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    disableOther('showRightPush');
};

$(window).resize(function () {
    // Window width with legacy browsers.
    windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

    if (windowWidth > 800) {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuRight, 'cbp-spmenu-close');
        disableOther('showRightPush');
    }

});

function disableOther(button) {
    if (button !== 'showRightPush') {
        classie.toggle(showRightPush, 'disabled');
    }
}

---

您可以使用窗口大小调整功能来执行此操作。下面是示例代码。请注意，代码只演示了这个想法。你需要完成它才能让它像你期望的那样工作

$(window).resize(function () {
    windowWidth = $(this).width();

    if (windowWidth >= 1224 ) {
        // push back the menu
    } 

---

}Subash的路径是正确的，但这是一个性能更高的版本，同时支持较旧的浏览器：

$(window).resize(function() {
  // Window width with legacy browsers.
  windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

  if (windowWidth > 1023) {
    // Do opposite of showRightPush.onclick.
  }

});

速度比较：

（无耻插头）查看示例

---

我真的很喜欢那种风格，codrops有很棒的东西。我将把它添加到RM模块。

您尝试过firebug吗？“在本网站上通常用作调试术语。听起来更像是您需要一个事件处理程序，它允许您响应特定条件并更改菜单的行为。是这样吗？如果是，请看一看。正确。当浏览器大小达到1024倍或更大时，如果菜单打开，我希望它收回。谢谢。我相信我有上面正确的相反代码，因为我用切换按钮测试了它，它将页面的主体推向相反的方向，但当我调整浏览器的大小时它不起作用：（我最终找到了Drastik。我不得不对原始代码做一些更改，但你的方法成功了：）