Question

您好我正在尝试制作我的网站的响应版本，并且我在导航方面遇到了一些问题，下面的代码工作......等等。我想要它，以便当文档小于600px时它将触发jquery代码，现在如果我超过600px它按预期工作进入页面，然后我调整窗口大小，使其小于600px并且代码触发，然后我点击出现的导航按钮，“滑动切换”继续射击，导航向上移动然后向下移动几次，然后保持关闭状态。然而，如果屏幕尺寸小于600px开始它工作正常，然后一旦扩展到它超过600px 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，不要觉得自己像个白痴根本没有注意到，但是当我让屏幕更大时它仍会触发，我尝试了else的声明＆gt;但这并没有什么。

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事件处理程序与元素分离。

Jquery调整大小陷入循环？

1 个答案: