1

以下はいくつかのバグのあるスクリプトであり、私はねじれを解決しようとしています。主なバグは、現在選択されている（ホバーされた）アイテムのサブメニューと以前に選択されたサブメニューの間の混乱または取り違えです。

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つのサブメニューのうちの1つが永久に消えることです。基本的に、スクリプトは非常に不安定です。このスクリプトを堅実なUIにするにはどうすればよいですか？最高のUXを確保するために、これらのバグをどのように排除できますか？ありがとう。

4

1 に答える 1

1

問題は、2番目のサブメニューがまだ表示されているときにキャッチしていて、もう一度ホバーしていると見なされることです。

ホバーされた要素に対応するサブメニューの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 に答える