Question

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

$(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 );     
}); 
   });

Answer 1

$("#menu> li").hover(function (){


//your code

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

使用此代码，前提是您没有任何其他功能绑定到悬停功能。这种解除绑定的技术删除了与悬停事件相关的功能。

Answer 2

您可以将eventHandler函数保存在变量中，并使用保存的变量在元素上调用unbind。由于处理程序函数不再执行，因此性能更高。

$(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();  
});

Answer 3

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

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

3 个答案: