Jquery调整大小陷入循环？

Question

您好，我正在尝试制作我的网站的响应式版本，但我在导航时遇到了一些问题，下面的代码工作......有点。我想要它，以便当文档小于 600px 时它会触发 jquery 代码，现在如果我进入页面时它超过 600px 它按预期工作，然后我调整窗口大小使其小于 600px 并且代码触发，然后我单击出现的导航按钮，并且“滑动切换”不断触发，因此导航在保持关闭之前向上然后向下移动几次。但是，如果屏幕尺寸小于 600 像素，开始时它可以正常工作，然后一旦扩展到超过 600 像素，jquery 仍然存在，所以当我单击按钮时，代码会触发并再次上下滑动，一遍又一遍，任何人都有任何想法：S代码基于本教程HERE感谢您的帮助。

jQuery(document).ready(function ($){
    $(window).on('resize', function () {
        var windowsize = $(window).width();
        if (windowsize < 600) {
            $("#mmenu").hide();
            $(".mtoggle").click(function() {
                $("#mmenu").slideToggle(500);
                $("#mmenu li").click(function(){
                    $("#mmenu").slideUp(500);
                });
            });
        }
    }).trigger('resize');
});

编辑：我修复了切换问题，问题是 slideToggle，我只需要将其更改为 slideDown，根本不会因为没有注意到这一点而觉得自己像个白痴，但是当我将屏幕放大时它仍然会触发，我尝试了> 600 的 else 语句，但这并没有什么。

Answer 1

使用 JQuery 快速回顾事件。每次在 JQuery 变量上调用 .click 时，实际上都是在将事件处理程序绑定到该 DOM 元素。所以例如这段代码：

$(".mtoggle").click(function() {
    $("#mmenu").slideToggle(500);
    $("#mmenu li").click(function(){
        $("#mmenu").slideUp(500);
    });
});

此代码将点击处理程序绑定到#mmenu li 元素每次您点击.mtoggle 元素。所以#menu li的点击事件实际上会发生多次。

要解决您的调整大小问题，听起来您正在寻找的是 .unbind 方法 (http://api.jquery.com/unbind/)。如果你想这样做，当你调整到大于 600px 时，.mtoggle 元素上没有事件处理程序，你必须调用这个方法：

$(".mtoggle").unbind('click');

从元素中分离所有click事件处理程序。