Javascript 仅获取并设置悬停时元素的高度和宽度一次

悬停时，以下代码获取子菜单面板中最高的列，并将所有列设置为相同的高度。它还获取所有列的宽度总和，并将列容器宽度设置为总和：

$(function() 
{
    $("#menu> li").hover(function () {
        var tallestColumnHeight = 0, submenuPanelTotalWidth = 0;
        $("ul.sub-menu-1 > li", this).each(function () {
            tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
            submenuPanelTotalWidth += parseInt($(this).outerWidth(), 10);
        }).height(tallestColumnHeight);
        $("ul.sub-menu-1 > li", this).parent().width( submenuPanelTotalWidth );
   });  
});

现在，上面的代码在每次悬停时设置两次高度和宽度，这会带来很大的开销。我想设置某种标志，使计算只运行一次

有什么想法吗？在这里使用jQuery.data（）将初始值存储一次，然后检查是否设置了数据，是否明智

非常感谢您的任何建议或帮助

更新

用mouseenter（）事件替换hover（）并使用one（）是最好的解决方案

以下是更新的代码：

$(function() 
{
$("#menu > li").one('mouseenter', function(e)   
{
    var tallestColumnHeight = 0,
        submenuPanelTotalWidth = 0;

    $("ul.sub-menu-1 > li", this).each(function ()
    {
        tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
        submenuPanelTotalWidth += parseInt($(this).outerWidth(true), 10);
    }).height(tallestColumnHeight);

    $("ul.sub-menu-1 > li", this).parent().width( submenuPanelTotalWidth );     
}); 
   });

---

如果没有任何其他函数绑定到悬停函数，请使用此代码。此取消绑定技术将删除与悬停事件关联的函数。

您可以将eventHandler函数保存在变量中，并使用保存的变量调用元素的取消绑定。这将更有效，因为处理函数将不再执行

$(function()  {

  var hoverFunction = function () {
    var tallestColumnHeight = 0,
    submenuPanelTotalWidth = 0;

    $("ul.sub-menu-1 > li", this).each(function () {
      tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
      submenuPanelTotalWidth += parseInt($(this).outerWidth(), 10);
    }).height(tallestColumnHeight);

    $("ul.sub-menu-1 > li", this).parent().width( submenuPanelTotalWidth );
    $("#menu> li").unbind('hover', hoverFunction);
  };

  $("#menu> li").hover();  
});

---

可以使用jquery的.one（）函数。不幸的是，悬停不是一个真正的事件。相反，它应该被替换为.one（“mouseenter mouseleave”，function（）…

似乎已经在SO中讨论过了。请参考Raghav，用mouseenter替换hover并使用.one（）是最好的方法。用新代码更新了我的帖子。

$(function()  {

  var hoverFunction = function () {
    var tallestColumnHeight = 0,
    submenuPanelTotalWidth = 0;

    $("ul.sub-menu-1 > li", this).each(function () {
      tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
      submenuPanelTotalWidth += parseInt($(this).outerWidth(), 10);
    }).height(tallestColumnHeight);

    $("ul.sub-menu-1 > li", this).parent().width( submenuPanelTotalWidth );
    $("#menu> li").unbind('hover', hoverFunction);
  };

  $("#menu> li").hover();  
});