0

マルチレベルサブメニューのこの例はhttp://jsfiddle.net/65R8q/2/にありますが、stop（）を使用して最初のサブメニューを安定させるために表示されません。これを修正するにはどうすればよいですか？

$(document).ready(function () {
    $(".cat").mouseover(function () {
        $(".sub1").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });

    $(".cat").mouseout(function () {
        $(".sub1").slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".sub1").mouseover(function () {
        $(this).css("display", "block").stop();
    });

    $(".sub1").mouseout(function () {
        $(this).slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".item2").mouseover(function () {
        $(".sub2").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });
});
4

1 に答える 1

1

私は多くのcssの間違いと多くのjQueryの競合をクリアしました。ついに私はこのことをなんとか解決することができました。

これがjsFiddleです。

まず第一に、これらのメソッドは完了後に自動的に要素化されるため、display: block/none後でcssを操作するコールバック関数を使用する必要はありません。slideUp/slideDownhides/shows $(this)

2番目： navをトリガーするラッパー要素を選択する必要があります。あなたの例では、小さな要素を選択します.catが、これは間違っています。ナビゲーション全体をラップする最大の要素を選択する必要があります。あなたの例では：.menu

第三に： protertがいつ使用されるかtop:0; left:0;を定義することを忘れないでください。position上/左の値を定義しないと、一部のブラウザで競合が発生します。

$(document).ready(function(){
    $('.menu').bind({
        mouseenter: function() {
            $(".sub1").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub1").slideUp(500);
        }
    });

    $('.item2').bind({
        mouseenter: function() {
            $(".sub2").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub2").slideUp(500);
        }
    });
});
于 2013-01-24T15:46:03.077 に答える