1

シンプルな 2 レベルのメニューがあり、マウスが上にある場合は上部のメニューでクラスが「選択」され、別の第 1 レベルのメニュー項目に移動するとクラスが削除されます。しかし、それは問題ではなく、すでに機能しています。

私の問題は次のとおりです。第 1 レベルのメニュー項目は、別の第 1 レベルのメニュー項目に移動するまで「選択済み」のままにしておく必要があります。これまで、マウスをアイテムから離すとすぐに、スクリプトは「選択された」クラスを削除します

<script type="text/javascript">
    $(document).ready(function(){
        $("#navi li").hover(function(){
            $(this).addClass('selected');
        },function(){
            $(this).removeClass('selected');
        });
    });
</script>

マウスが別のアイテムにあるとすぐに、クラスが「選択された」クラスを持つすべてのアイテムがクラスを削除されるようにしたいのですが、マウスがサブメニューアイテム上にある場合、またはページ上のどこにでもある場合、選択されたアイテムはそのままにしておく必要があります選択されました。

4

3 に答える 3

1

これはあなたが求めているものですか？ホバー時に選択したクラスをすべて削除してから、選択したものを必要な要素に追加できます。

 $(document).ready(function(){
        $("#navi li").hover(function(){
            $("#navi li").removeClass('selected');
            $(this).addClass('selected');
        }
    });
于 2012-04-24T13:34:18.510 に答える
0

mousemoveイベントにバインドしてみてください:

$("ul").mousemove(function (e) {
    if (e.target.tagName == "LI") {
         $(".selected").removeClass("selected");
         $(e.target).addClass("selected");        
    }
});​

デモ。

于 2012-04-24T13:36:40.783 に答える
0

これは、次の理由で発生します。

},function(){
                $(this).removeClass('selected');
            });

つまり、マウスを離すと上記のコールバックが実行されます..

代わりにこれを行います：

 $(document).ready(function(){
            $("#navi li").hover(function(){
                $(this).addClass('selected');
            },function(){ });
        });

http://jsfiddle.net/SyvYv/

http://api.jquery.com/hover/を参照

于 2012-04-24T13:36:59.297 に答える