1

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

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

3 回答 3

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


//your code

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

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

于 2013-02-06T20:48:53.663 回答
0

您可以将 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();  
});
于 2013-02-06T20:52:07.727 回答
0

您可以使用 jquery 的 .one() 函数。不幸的是，悬停不是真正的事件。相反，它应该被替换为 .one("mouseenter mouseleave",function()...

于 2013-02-06T21:36:39.623 回答