Question

On hover, the following code gets the tallest column in a submenu panel and sets all columns to the same height. It also gets the sum of the width of all columns and sets the column container width to the sum:

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

Right now the code above has a lot of overhead as it gets and sets the height and width twice on each hover. I want to set some kind of flag so that the calculations only run once.

Any ideas? Is it wise to use jQuery .data() here to store the initial values once and then check if the data is set?

Any suggestions or help with this is much appreciated!

UPDATE

Replacing hover() with the mouseenter() event and using one() was the best solution.

Here is the updated code:

$(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

You can use .one() function of jquery. Unfortunately, hover is not a real event. Instead it should be replaced as .one(“mouseenter mouseleave”,function()…