Question

我正在对我个人网站上的有效导航指示箭头进行一些工作：http://staging.rjlacount.com

问题：导航指示箭头不会在页面加载时位于活动项目下方，但会在窗口调整大小。

我用来使箭头居中的代码（从http://staging.rjlacount.com/js/functions.js的第80行开始）如下：

var $arrowOffset = 8;

var navArrowCenter = function() {
  var $current_page_item = $(".current_page_item a");
  $arrow
    .css("left", $current_page_item.position().left + ( ($current_page_item.width() / 2) - $arrowOffset) );
};

$wind.resize(function() {
    navArrowCenter();
});

$wind.load(function() {
    navArrowCenter();
});

我已经尝试删除页面淡入淡出加载功能，假设它导致jQuery无法正确呈现元素宽度，但这似乎根本不会影响该问题。

非常感谢正确方向的任何一点。

谢谢！

Answer 1

您是否尝试过从$(window).load()删除它？

试试这个：

  navArrowCenter();

而不是：

$wind.load(function() {
    navArrowCenter();
});

Answer 2

我想这是因为DOM还没准备好。在文档ready而不是load上尝试：

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

顺便说一句，如果那是JQuery load（就像它似乎那样），那就完全不同了 - 它用于从另一个页面加载html。

在查看您的代码之后，无论如何，您已将所有内容放在document ready内。因此，正如@Blowsie所说，只需调用该函数而不将其包含在$wind.load

中

jQuery - 无法计算页面加载时的元素宽度？

2 个答案: