Question

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

(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

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

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

Answer 1

我进行了快速测试，发现删除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();
        }

    });

Answer 2

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

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

希望这会给你一个想法。

谢谢，

Jothi

页面调整大小之后滑动切换 - jQuery

2 个答案: