Jquery 当窗口大于480像素时，执行窗口调整功能

>首先，当窗口>480时，代码将安装工具提示处理程序，并且每次检测到该窗口时，都会再次安装它（导致多个事件处理程序）。而且，如果窗口的大小小于480，则不会删除工具提示事件处理程序

我建议这样做更简单：

function toolTip() {
    var list = $("#readMoreUl");
    var links = list.children("li").children("a");
    var tooltips = links.children("span.tooltip");
    var overlay = $("#overlay");

    links.hover(function () {
        if ($(window).width() > 480) {
            $(this).addClass("highlight");
            $(this).children("span.tooltip").fadeIn(350);
            overlay.fadeIn(400);
        }
    },
    function () {
        $(this).children("span.tooltip").fadeOut(40);
        overlay.fadeOut(30);
        $(this).removeClass("highlight");
    });    
}

$(document).ready(function () {
    toolTip();
});

您可以在此处看到它的工作原理：

---

​

我不明白为什么会这样。当窗口调整到小于480像素的尺寸时，鼠标悬停时不会显示任何工具提示，这是应该的。但是浏览器怎么会知道呢？我看不到任何。调整大小功能？因此，脚本不会被告知窗口已调整大小，对吗？@BramVanroy-当您将鼠标悬停在工具提示项上时，悬停代码会检查窗口是否小于480宽。如果是，则不会弹出工具提示（代码的第8行）。调整窗口大小时，它不需要更改任何内容。

function toolTip() {
    var list = $("#readMoreUl");
    var links = list.children("li").children("a");
    var tooltips = links.children("span.tooltip");
    var overlay = $("#overlay");

    links.hover(function () {
        if ($(window).width() > 480) {
            $(this).addClass("highlight");
            $(this).children("span.tooltip").fadeIn(350);
            overlay.fadeIn(400);
        }
    },
    function () {
        $(this).children("span.tooltip").fadeOut(40);
        overlay.fadeOut(30);
        $(this).removeClass("highlight");
    });    
}

$(document).ready(function () {
    toolTip();
});