1

我创建了一个可折叠的导航，它在页面加载时工作正常，但是在调整窗口大小时，它似乎变得迷幻并且上下滑动了很多次（可以只是两次，或者最多可以持续十次） .

(function ($) {
$.fn.myfunction = function () {
    $(".navi-btn").hide();    
    $(".navigation").show();
};
})(jQuery);

(function ($) {
$.fn.mysecondfunction = function () {
    $(".navi-btn").show();
    $(".navigation").hide();
    $(".navi-btn").click(function () {
        $(".navigation").slideToggle();
    });
    $("li").click(function () {
        $(".navigation").slideToggle();
    });
    $("#width").text("too small");
};
})(jQuery);


$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
    $('#width').myfunction();
} else {
    $('#width').mysecondfunction();
}

$(window).resize(function () {
    var width = $(window).width();
    if (width > 400) {
        $('#width').myfunction();
    } else {
        $('#width').mysecondfunction();
    }

   });
 });

这是一个“工作”演示jsfiddle

我自己编写了脚本，所以我确信有一个简单的修复，我似乎不知道我做了什么。

我在想也许在调整大小之后，重新加载函数是一个很好的解决方法，如果是这样，如何实现这种效果？

4

2 回答 2

0

我进行了快速测试，发现删除resive条件并将其放入它自己的函数中似乎可以解决问题

从

$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
    $('#width').myfunction();
} else {
    $('#width').mysecondfunction();
}

$(window).resize(function () {
    var width = $(window).width();
    if (width > 400) {
        $('#width').myfunction();
    } else {
        $('#width').mysecondfunction();
    }

   });
 });

至

$(document).ready(function () {
    var width = $(window).width();
    if (width > 400) {
        $('#width').myfunction();
    } else {
        $('#width').mysecondfunction();
    }
});
$(window).resize(function () {
        var width = $(window).width();
        if (width > 400) {
            $('#width').myfunction();
        } else {
            $('#width').mysecondfunction();
        }

    });
于 2013-08-26T18:07:47.023 回答
0

您在调整窗口大小时添加点击事件。这会将同一个函数多次绑定到 click 事件。所以最好的选择是只绑定一次事件，这可以在准备好的事件上完成。在这个链接中，我通过向 navi-btn 添加一个类并检查它来限制这个绑定在 resize 事件本身中。

$(".navi-btn").not(".binded").addClass("binded").click(function () {
    $(".navigation").slideToggle();
});

希望这能给你一个想法。

谢谢，

约蒂

于 2013-08-26T18:23:13.423 回答