Question

我在这里有一些代码片段：

$(window).resize(function() {
    if ($(window).width() <= 768) {
            $('.menu-item-810').click(function () {
                $('.squares').slideDown(2000);
            });
        }
    });

即当浏览器窗口宽度小于或等于768px时，当您单击具有.menu-item-810类的元素时，请滑动.squares元素。

这就是我想要的，它确实有效..但只有99.8％正确。

当屏幕宽度大于768px时，.squares元素具有不同的jQuery效果，它会淡入淡出而不是滑动。我需要它以slideDown代替，当在平板电脑/移动视图中时，所以我写了上面的代码片段。

就像我说的，一切正常，但是说我打开了任何浏览器，将其大小调整为768px或更小的宽度，浏览到该网站，然后点击.menu-item-810。什么都没发生。只有当我再次手动调整浏览器的大小时，jQuery才会触发。因此，如果我再次调整浏览器大小，然后单击.menu-item-810，.squares元素会按预期向下滑动，但前提是我手动调整浏览器大小。我认为如果我将该片段包装在$（document）.ready（）中，那jQuery就会从一开始就收听，但这也不起作用，它只是具有与没有相同的行为。

Anyhoo，任何帮助都会一如既往地受到重视。希望我只是遗漏了一些简单的东西。

谢谢你们！

Answer 1

实际上，这没有意义吗？调整窗口大小时，resize事件处理程序会触发数千次，并且在resize处理程序中绑定click事件处理程序将为您提供数千个点击处理程序。

附加一个单击处理程序，并检查其中的窗口宽度

$('.menu-item-810').click(function () {
    if ($(window).width() < 768) {
        $('.squares').slideDown(2000);
    }
});

Answer 2

加载javascript后，需要触发调整大小事件才能触发代码。 - 在处理程序初始化之前，它还不知道窗口是否已经调整大小。

将相同的代码段放在document.ready()函数中，以初步检查窗口大小：

$(document).ready(function() {
    if ($(window).width() < 768) {
        $('.menu-item-810').click(function () {
            $('.squares').slideDown(2000);
        });
    }
});

Answer 3

按照代码的顺序，它首先检查窗口大小，然后只有，如果它很小，则添加事件处理程序。

听起来你想要的是总是调用事件处理程序，然后根据一方改变动作。

$(window).resize(function() {
    $('.menu-item-810').click(function () {
        if ($(window).width() <= 768) {
            $('.squares').slideDown(2000);
        }
    });
});

实际上，现在我想更多，你甚至不需要在调整大小时设置处理程序。只需将其设置为文档加载，并在单击时检查大小。

$(document).ready(function() {
    $('.menu-item-810').click(function () {
        if ($(window).width() <= 768) {
            $('.squares').slideDown(2000);
        }
    });
});

window.resize - 在我手动更改浏览器宽度之前不会激活

3 个答案: