1

ナビゲーション メニューの一部の要素にサブメニューがある Web サイトを構築しています。これらのサブメニューは、マウスが要素の上に置かれたときに表示されますが、もちろん、実際のホバーがないため、モバイルでは表示できません。タップはクリックを意味し、リンクをたどります。簡単な解決策を望んでいましたが、モバイルデバイスでは機能しません...

ループ内のコード スニペットは、( ) を含むthisメニュー項目 ( )です。lisubmenuul

$(this).find("a").on("mouseenter focusin click", function(e) {
    if(submenu.css("display") != "block") {
        e.preventDefault(); //should work on mobile
    }
    submenu.stop().css('display', 'block').animate({
        top: 1.2em,
        opacity: 1
    }, 200);
});

これを Firefox でテストします。通常の使用では、マウスがその上に置かれるとすぐにdisplayなるため、サブメニューが表示される前に実際にメニュー項目をクリックすることはできません。blockしたがって、Web コンソールで次のように入力します。

$("#nav > ul > li:first-child > a").click()

これにより、期待される動作が得られます。サブメニューが出てきますが、リンクはたどられていません。モバイルでは、リンクは引き続きたどられます...何が得られますか?

アップデート

アラート ステートメントを 2 つ入力しました。ハンドラーで最初にイベントタイプを言うものと、直前に「デフォルトを防止する」と言うものe.preventDefault。私のモバイル ブラウザ (Android 用の Dolphin ブラウザ) では、メニュー項目をタップすると次のように表示されます。

  1. イベントはmouseenterです
  2. デフォルトの防止
  3. イベントはクリック

当然のことながら、最初に発生したイベントが「mouseenter」の場合、メニューが表示されるポイントであるため、デフォルトではクリックが妨げられません。つまり、最初の mouseenter がメニューを表示するが、クリックが発生しないことを確認する必要があります... topcss プロパティを確認することはできますが、別の方法があるかどうか疑問に思います。

4

1 に答える 1

0

の値を使用するのではなく、サブメニューが適切な位置にあるかどうかを確認する別のチェックを追加することで機能しましたdisplay。

$(this).find("a").on("mouseenter focusin click", function(e) {
    if(e.type == "click" && submenu.css("top") != "1.2em") {
        e.preventDefault();
    }
    submenu.stop().css('display', 'block').animate({
        top: 1.2em,
        opacity: 1
    }, 200);
});
于 2013-01-03T12:25:41.143 に答える