0

>> JSFIDDLE <<

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

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？

4

1 回答 1

1

一方面，您的代码在窗口大于 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/ ​</p>

于 2012-07-20T15:59:12.527 回答