Jquery 在不同的屏幕大小上清除toggle（）

我有一个链接，我想显示更多的内容点击，但只有在手机屏幕上。我正在使用调整大小和加载功能来确定屏幕大小，但是，当我调整大小到小屏幕，然后再调整到大屏幕，然后单击链接时，它仍然会切换，就像这样，解除绑定并不完全起作用，或者有时它也会影响小屏幕上的链接，它们完全停止工作：

在此拨弄：调整屏幕大小以测试：

$（窗口）.on（“加载调整大小”，函数（）{
如果（$（窗口）.width（）<960）{
$（'ul'）.hide（）；
$（'a'）.bind（“单击”，函数（）{
$（'ul'）.toggle（）；
$（'ul'）.toggleClass（'collapsed'）；
返回false；
});
}else if（$（窗口）.width（）>960）{
$（'a'）。单击（函数（）{
$（'ul'）。解除绑定（'click'）。切换（）；
});             
}              
});

您可以将if屏幕大小放在click处理程序中，因此如果屏幕大于960，请执行。通过这种方式，您可以避免尝试执行的解除绑定操作，并且不会在每次调整大小时都运行此代码

对于

ul

隐藏/显示，这可以通过媒体查询在CSS中完成

另外，当宽度>960时，您可能需要为ul执行.show（）

$(document).ready(function () {
    $(window).on("resize", function () {
        if ($(window).width() < 960) {
            $('ul').hide();
        } else {
            $('ul').show();
        }
    });

    $('a').bind("click", function () {
        if ($(window).width() < 960) {
            $('ul').toggle();
            $('ul').toggleClass('collapsed');
        }
        return false;
    });
});

$(window).on("load", function () {
    if ($(window).width() < 960) {
        $('ul').hide();
    } else {
        $('ul').show();
    }
});

$（文档）.ready（函数（）{
$（窗口）。打开（“调整大小”，函数（）{
如果（$（窗口）.width（）<960）{
$（'ul'）.hide（）；
}否则{
$（'ul'）.show（）；
}
});
$（'a'）。绑定（“单击”），函数（）{
如果（$（窗口）.width（）<960）{
$（'ul'）.toggle（）；
$（'ul'）.toggleClass（'collapsed'）；
}
返回false；
});
});
$（窗口）。打开（“加载”，函数（）{
如果（$（窗口）.width（）<960）{
$（'ul'）.hide（）；
}否则{
$（'ul'）.show（）；
}
});

---

实际上，您应该调整当前内容的大小并将其加载到function中，然后调用它。我只是复制它来告诉你我的意思

使用

window.screen.availHeight

和

window.screen.availWidth

来确定屏幕大小

---

您可能还希望测试特定于触摸设备的事件（例如

window.ontouch

）。

window.screen.availWidth

返回屏幕宽度而不是浏览器width@huangismop明确地写了屏幕宽度，所以你的评论和你的否决票似乎是不合理的。如果你读了代码，你可以看到OP想要做什么achieve@huangism如果你阅读课文，你可以看到op想要实现的目标。如果你阅读代码，你会发现它是如何失败的。@是的，事实上人们总是调整屏幕大小，只需要一些电缆连接到他们选择的显示硬件或一些软件来镜像他们的手持屏幕。无论如何，op的答案选择明确了他想要什么，所以每个人都很好，你在占卜中获得了A+。我应用了你的解决方案，它改进了一点，在elast它不再在大屏幕上显示“ul”，但是：如果我调整到全宽并单击链接，然后调整到小，则切换不起作用，我必须重新调整大小，然后它再次工作。在这两种情况下，我都让“ul”隐藏起来。@yennefer我不知道你有什么问题。我只是在小提琴上试了一下，效果非常好。制作一把小提琴来演示您的问题，因为如果您直接使用我的代码，那么它应该工作

$（窗口）{

，外部还是无关紧要？@yenner如果有评论说将此放入doc ready，我将对其进行编辑，以便您更好地理解。单击处理程序和调整大小处理程序位于doc内部ready@yennefer因为

if（$（window）.width（）<960）

检查单击时的宽度。处理程序在您单击时运行代码，因此它将获得您单击时的窗口宽度。您现在是否完全理解这一点？调整窗口大小时会运行resize函数。单击处理程序在调用时（当您单击时）会运行

$(document).ready(function () {
    $(window).on("resize", function () {
        if ($(window).width() < 960) {
            $('ul').hide();
        } else {
            $('ul').show();
        }
    });

    $('a').bind("click", function () {
        if ($(window).width() < 960) {
            $('ul').toggle();
            $('ul').toggleClass('collapsed');
        }
        return false;
    });
});

$(window).on("load", function () {
    if ($(window).width() < 960) {
        $('ul').hide();
    } else {
        $('ul').show();
    }
});