1

下面是一个带有一些错误的脚本，我正在尝试解决这些问题。主要错误是当前选择（悬停）项目的子菜单和先前选择的子菜单之间的混淆或混淆。

jQuery(document).ready(function($) {
    $("ul.menu > li").hover(
        function() {
            $(this).find("ul.sub-menu").stop().animate({
                height: 'toggle',
                opacity: 'toggle'
            });
        }
    );
});

该错误不会出现在每个父项的初始悬停上，但似乎只发生，从这个小提琴可以看出，如果悬停在第二个父项上，然后悬停在第一个父项上，然后快速悬停到第一个子项菜单，您将看到所需的子菜单消失，而之前选择的子菜单重新出现。另外，我还应该补充一点，如果将鼠标悬停在第 3 个父项上，然后将鼠标悬停在第 2 个父项上，然后快速悬停到第 2 个子菜单，您将再次看到不希望的效果或错误。

另一个不太详细的错误或故障是，在正确组合或随机悬停数量后，3 个子菜单中的 1 个永久消失。基本上，脚本很不稳定；如何使这个脚本成为坚如磐石的 UI？如何消除这些错误以确保最佳用户体验？谢谢。

4

1 回答 1

1

问题是您正在捕获第二个子菜单，而它仍然可见并且它被视为再次悬停它。

您可以通过更新与悬停元素对应的子菜单的 z-index 来轻松解决此问题：

$("ul.sub-menu").css('z-index', 1);
$(this).find("ul.sub-menu").css('z-index', 2).stop()...

http://jsfiddle.net/pF8wZ/6/

于 2013-01-29T00:20:22.760 回答