jQuery UX глюки в выпадающем меню CSS

Question

Ниже приведен сценарий с несколькими ошибками, и я пытаюсь решить проблемы. Основной ошибкой является путаница или путаница между подменю выбранных (зависших) элементов и ранее выбранными подменю.

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

Ошибка не появляется при начальном наведении курсора каждого родительского элемента, но, кажется, происходит только, как можно видеть из этой скрипки, если навести курсор на 2-й родительский элемент, затем навести 1-го родителя, а затем быстро навести курсор на 1-й подпункт меню, вы увидите, что нужное подменю исчезнет, ​​а ранее выбранное подменю появится снова. Кроме того, я должен также добавить, что если навести курсор на 3-й родительский элемент, а затем навести курсор на 2-го родителя, а затем быстро навести курсор на 2-е подменю, вы снова увидите нежелательные эффекты или ошибку.

Другая менее детальная ошибка или сбой заключается в том, что после правильной комбинации или количества случайных зависаний 1 из 3 подменю постоянно исчезает. По сути, сценарий очень нестабилен; Как я могу сделать этот скрипт надежным пользовательским интерфейсом? Как можно устранить эти ошибки, чтобы обеспечить лучший UX? Благодарю.

Answer 1

Проблема в том, что вы ловите второе подменю, пока оно все еще видно, и оно считается снова всплывающим.

Вы можете решить это довольно просто, обновив z-index для подменю, соответствующего элементу hovered:

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

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