Javascript 页面调整错误后的滑动切换-jQuery

我已经创建了一个可折叠的导航，它在页面加载时运行良好，但在调整窗口大小时，它似乎会出现抖动并上下滑动多次（可以是两次，也可以是十次）

这里是一个“工作”演示

我自己写的脚本，所以我相信有一个简单的修复，我只是不知道我做了什么

---

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

我进行了快速测试，发现删除

resive

条件并将其放入自己的函数似乎可以解决问题

从

到

---

调整窗口大小时，您正在添加单击事件。这将多次将同一函数绑定到click事件。因此，最好的选择是只绑定事件一次，这可以在就绪事件上完成。在本文中，我通过向navi btn添加一个类并检查它来限制resize事件本身中的绑定

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

希望这能给你一个想法

谢谢

---

Jothi

链接返回404错误更好吗？

$(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();
        }

    });

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