1

そのため、私はこれに多くの時間を費やし、最後の部分に到達しましたが、ドロップダウン機能を作成できないようです。

jQueryホバーを使用しています。メインリンクにカーソルを合わせると、サブリンクが表示され、コンテンツが下に移動し、子を持つサブリンクにカーソルを合わせると、サブサブリンクが表示され、コンテンツがさらに下に移動しますが、サブサブリンクにカーソルを合わせると、コンテンツが元に戻りますただし、サブサブリンクはその下に表示されたままです。

これを乗り越えるのに役立つ理論がいくつかあります。そのうちの 1 つは、2 つの異なる関数の代わりにサブ関数を使用することです。もう 1 つは、case ステートメントを使用してコンテンツを移動することですが、コードを合理化すると、問題も修正される可能性があると感じています。

これが私のjQueryです：

$(document).ready(function () {
    $(".main-menu-link").hover(function () {
        $(".main-menu-link").removeClass("active");
        $(this).addClass("active");
        //$(".menu-depth-1").hide();
        $(this).parent().siblings().children('ul').hide();
        //
        $(this).siblings(".menu-depth-1").fadeIn();
        if ($(this).siblings('ul').is(":visible")) {
            $("#index-content").animate({
                'margin-top': 46
            });
            alert('doh');
        } else {
            $("#index-content").animate({
                'margin-top': 10
            });
        }

    });
    $(".sub-menu-link").hover(function () {
        $(".sub-menu-link").removeClass("active");
        $(this).addClass("active");
        $(this).parent().siblings().children('ul').hide();
        $(this).siblings(".menu-depth-2").fadeIn();
        if ($(this).siblings('ul').is(":visible")) {
            $("#index-content").animate({
                'margin-top': 92
            });
        } else {
            $("#index-content").animate({
                'margin-top': 46
            });
        }
    });

});

ここにjsfiddleがあります：

http://jsfiddle.net/8tcQT/4/

助けてくれてありがとう、読んでくれてありがとう。

ハ

4

1 に答える 1

1 
$(".sub-menu-link").hover(function () {

この行は、サブリンクとサブサブリンクの両方がそのホバー機能をトリガーするため、サブサブリンクがコンテンツを上に移動させる理由です。

$(".sub-menu-link").hover(function () {
    $(".sub-menu-link").removeClass("active");
    $(this).addClass("active");

    // I added the following line:
    $(this).siblings().find('.sub-menu-link').off('mouseenter mouseleave');

    $(this).parent().siblings().children('ul').hide();
    $(this).siblings(".menu-depth-2").fadeIn();
    if ($(this).siblings('ul').is(":visible")) {
        $("#index-content").animate({
            'margin-top': 92
        });
    } else {
        $("#index-content").animate({
            'margin-top': 46
        });
    }
});

コード行を追加すると、親サブリンクが最初にホバーされたときに、サブサブリンクからホバー機能が削除されます。

または、 sub-sub-links の代わりに別のクラス名を使用しclass="sub-menu-link"ます。

私の解決策は、サブサブリンクのレベルで見つかった問題にのみ取り組むことに注意してください。リンクのさらに深いリスト、つまりsub-sub-sub-linksとsub-sub-sub-sub-linksが必要な場合は、あなたが言ったように「サブ関数」を作成することが望ましいでしょう。

于 2013-05-22T01:50:27.143 に答える