0

私は、主要なプロジェクトのために継承したサブメニューに遅延を追加することに取り組んできました。約 10 時間試行錯誤した後、私は本当に助けを得ることができました。jQuery や Javascript を使用してサブメニューに遅延を追加する例が文字通り何百もあることは知っていますが、このモジュラー コード構造で機能する例は見たことがなく、あらゆる場所で同様の例を探しました。

これはレスポンシブ Web サイトであり、モジュールの動作方法を変更すると機能に悪影響が及ぶかどうかわからないため、モジュールを大幅に書き直すことなくこれを試してみたいと思います。

以下のコードは、一連の UI 関数の 1 つの関数にすぎません。

MLS.ui = { ...

tabs: function (element, hover) {
    var scope = element,
        $contentTabs = $jQ(scope + ' > .tab-content > .tab'),
        activeClass = 'active';



    $jQ(scope + ' > .tab-menu > .tab').each(function (i, el) {
        $jQ(this).add($contentTabs[i]).attr('tab', i + 1);
    });

    $jQ(scope + ' > .tab-menu > .tab').on((hover ? 'mouseenter' : 'click'), function (e) {
        if (!hover) {
            e.preventDefault();
        }

        var tab = $jQ(this).attr('tab');
        $jQ(scope + ' > .tab-menu > .tab').add(scope + ' > .tab-content > .tab').removeClass(activeClass);
        $jQ(this).add(scope + ' > .tab-content > .tab[tab=' + tab + ']').addClass(activeClass);
    });

    $jQ(scope + ' > .tab-menu > .tab:first-child').add(scope + ' > .tab-content > .tab:first-child').addClass(activeClass);
},

...}

私が知る限り、.on イベント ハンドラーは、クラス「アクティブ」を追加し、ホバーされなくなった要素から削除していますが、それがどのように可能であるかはわかりません。

私が試したいくつかのことは、タブ関数全体に setTimeout を追加すること、.on イベント ハンドラーに遅延とキューを設定すること、さらに別のモジュールを作成することです。いずれも効果がありませんでした (または、要素にカーソルを合わせたままでも、removeClass イベントを発生させます。)

ここで何が欠けていますか？この問題にこれ以上時間を費やす余裕はありません。

編集:これは私が試したものの例ですが、1つのliにカーソルを合わせると、一致するすべてのDOM要素にクラスを追加するだけです。ホバーされた単一の要素をターゲットにして、アクティブなクラスを削除するのを遅らせるにはどうすればよいですか?

    tabs: function (element, hover) {
    var scope = element,
        $contentTabs = $jQ(scope + ' > .tab-content > .tab'),
        activeClass = 'active';

    $jQ(scope + ' > .tab-menu > .tab').each(function (i, el) {
        $jQ(this).add($contentTabs[i]).attr('tab', i + 1);
    });

    $jQ(scope + ' > .tab-menu > .tab').on((hover ? 'mouseenter' : 'click'), function (e) {
        if (!hover) {
            e.preventDefault();
        }

        var tab = $jQ(this).attr('tab');
        $jQ(this).add(scope + ' > .tab-content > .tab[tab=' + tab + ']').delay(900).queue(function () {
            $jQ(scope + ' > .tab-menu > .tab').addClass(activeClass);
            $jQ(this).unqueue();
        });
    });

    $jQ(scope + ' > .tab-menu > .tab').on('mouseleave', function (e) {
        if (!hover) {
            e.preventDefault();
        }

        var tab = $jQ(this);
        $jQ(scope + ' > .tab-menu > .tab').add(scope + ' > .tab-content > .tab').delay(1000).queue(function () {
            $jQ(scope + ' > .tab-menu > .tab').removeClass(activeClass);
            $jQ(this).unqueue();
        });

    });

    $jQ(scope + ' > .tab-menu > .tab:first-child').add(scope + ' > .tab-content > .tab:first-child').addClass(activeClass);
},
4

0 に答える 0