Question

＆GT;＆GT; JSFIDDLE＆lt;＆lt;

我认为标题是自我解释的。我不知道为什么这段代码不起作用：

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

    links.hover(function () {
        $(this).children("span.tooltip").fadeIn(350);
        },
    function () {
        $(this).children("span.tooltip").fadeOut(40);
        });    
}

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() > 480) {
            toolTip();
        }
    }).resize();
});

我也想知道：我使用上一次.resize通话是否正确？模拟实际调整大小，以便在window ready上调用函数？

Answer 1

首先，当窗口为＆gt;时，您的代码会安装工具提示处理程序。 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();
});

您可以在此处查看：http://jsfiddle.net/jfriend00/yVCwS/

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

1 个答案: