0

我正在使用以下 jQuery 代码在顶部菜单导航中查找活动链接的位置：

$(document).ready(){
    // Handles the triangle image sprite for the top navigation
$('#topnav a')
    .on({ 

        mouseenter: function() {

            var pos = $("#topnav a.active-top").offset();
            console.log("Top: " + pos.top + " Left: " + pos.left );

            // Get the position of the current hovered "a" element
            var upSprite = $("#upArrow").show(),
                pos = $(this).offset(),
                aWidth = $(this).width(),
                offsetTop = 27, // Adjust this to raise or lower the sprite
                offsetLeft = aWidth / 2; // Centers the element under the link


            upSprite
                .css({
                    "top": pos.top + offsetTop,
                    "left": pos.left + offsetLeft
                });

            //console.log("Top: " + pos.top + " Left: " + pos.left);

        },

        mouseleave: function() {
            // Hide the arrow once the mouse leaves
            $('#upArrow').hide();
        }

    });
}

现在，当我将完全相同的代码粘贴到此事件处理程序之外时

 $(document).ready(function () {        
     var pos = $("#topnav a.active-top").offset();
     console.log("Top: " + pos.top + " Left: " + pos.left );
}

我的 pos.left 得到了完全不同的值。

据我了解 .offset() 应该给我相对于文档的位置，而不像 .position() 给我相对于父容器的位置。

当代码在 .on() 事件处理程序的范围内时，它是否被提供了不同类型的上下文？我尝试使用 $.proxy() 无济于事。任何提示表示赞赏。谢谢。

4

2 回答 2

3

$(document).ready()DOM 加载后触发；但在所有图像加载之前。由于这个原因，您会发现offset()通过重新绘制元素来检索偏移量后，偏移量正在发生变化。

要解决此问题，您可以$(window).load()改为处理事件，或继续检索单击处理程序中的位置（这是我的建议）。

于 2012-04-18T14:49:26.977 回答
1

很难对此进行分析，因为我不确切知道“#topnav a.active-top”引用的元素以及（可能）修改其位置的其他元素。

我认为，在 $(something).mouseenter() 之前的 $(document).ready() 之后有一些处理（图像加载、更改某些元素的宽度/高度等）。

于 2012-04-18T14:56:02.747 回答