Question

我在我的母版页上使用标准的sharepoint:aspmenu导航控件和一些jQuery我在菜单下显示一个div，其高度基于我悬停在其上的主要项目的子菜单项的数量。

如果导航是：

Products | About us | Contact us

并且产品有10个子项目，我显示的附加div将是我将鼠标悬停在5个子项目上的两倍高。我使用div的原因是因为我想在页面上向下推送所有内容，而不是在主要内容上方显示菜单项的普通css菜单。

我遇到的问题是，如果我在页面仍然加载时将鼠标移到菜单项上，那么即使页面完成加载（在Chrome中），我也看不到任何主项目的子菜单项。如果我在页面加载时没有移动鼠标或在页面上的任何其他地方移动鼠标但是菜单那么它就像在所有其他浏览器中一样工作。

脚本：

var i = new Array();
$('li.dynamic-children').find('ul').each(function() {
    var $items = $(this).children();
    var itemCount = $items.length;
    i.push(itemCount);      
    if(itemCount > 7)
    {
        $items.addClass('multiColumn');
    }
});


// Hide/show full width div under menu on hover
$('li.dynamic-children').mouseenter(function() {            
        var itemHeight = 32; // height in pixels per item
        var divHeight;                  

        // Calculate height of div based on number of menu items
        var $menuList = $(this).find('ul');
        var numberOfMenuItems = i[$(this).index()];

        $menuList.hide().delay(700).fadeIn(500);

        divHeight = itemHeight * numberOfMenuItems;

        $('#DropdownMenuBox').stop(true,true).animate({height: divHeight + "px"}).slideDown(700);
    }).mouseleave(function() {          
        $('#DropdownMenuBox').stop(true,true).delay(400).slideUp(700);          
    });

如果我删除该行

$('#DropdownMenuBox').stop(true,true).animate({height: divHeight + "px"}).slideDown(700);

然后我在Chrome中没有问题，除了我没有得到我想要的效果所以我想知道为什么这行在Chrome中引起麻烦而在其他任何浏览器中都没有？子菜单项有一个左侧的类：-999当我在页面加载过程中将鼠标悬停在菜单项上时，这不会被删除。

我开始创建一个jsfiddle，但是html sharepoint的产生太大了，无法得到一个显示我问题的好小提琴。

为什么Chrome不喜欢上面突出显示的行？

编辑：还没有想出来，临时解决方案是在页面加载时隐藏~500ms的导航，这样在页面加载完成之前就不可能将鼠标悬停在任何项目上。虽然这有点俗气。

提前致谢。

谷歌浏览器的CSS菜单问题

0 个答案: