jquery - jquery - 仅为当前元素的子元素设置悬停时所有列的相等高度

Question

我有以下 Javascript 代码将菜单的子菜单列（li 标签）的高度设置为相同的高度：

$(function() 
{
    var mainMenuElement = $("#mainMenu > li > a"),
        tallestColumnHeight = 0,
        mainMenuElementColumns = $("#mainMenu > li > ul.sub-menu > li");

    mainMenuElement.hover(function () 
    {
            mainMenuElementColumns.each(function()
            {
                if ($(this).height() > tallestColumnHeight) 
                { 
                    tallestColumnHeight = $(this).height(); 
                }
            });     
            mainMenuElementColumns.height(tallestColumnHeight); 
    }); 
});

这可行，但是它将所有（兄弟）顶部菜单项子菜单列的高度也设置为首先找到的 tallestColumnHeight。

如何仅针对悬停的当前元素的子元素？

谢谢！

Answer 1

使用上下文查找和定位每个主列表中的子菜单，而不是所有子菜单：

$(function() {
    $("#mainMenu > li > a").hover(function () {
        var tallestColumnHeight = 0;
        $("ul.sub-menu > li", this).each(function () {
            if ($(this).height() > tallestColumnHeight) {
                tallestColumnHeight = $(this).height();
            }
        }).height(tallestColumnHeight);
    });
});