0

すべてのブラウザーで機能する次の html マークアップがありますが、iPhone/iPad で表示すると、ドロップダウン リストが開きません。

空のアンカー タグを使用する理由は、現在の CSS ルールにより、親リンクのスタイルを残りのメニュー リンクと同じように維持するためです。同時に、親リンクがページをリダイレクトするのを防ぎます。

これは非常に間違ったアプローチであり、私が経験している問題の原因ですか?

<ul class="primary-nav">
   <li><a>Group links</a>
    <ul id="sub_nav" class="sub">  
    <li><a href="/">Link</a></li>  
    <li><a href="/">Link 1</a></li>  
    <li><a href="/">Link 2</a></li>  
    <li><a href="/">Link 3 </a></li>
    </ul>
   </li>
  </ul>

メニューに次のJavaScriptが配置されていることがわかります

    // Test is browser is IE
    var browserIsIE = null;
    if (jQuery.browser.msie == true) {
        browserIsIE = true;
    } else {
        browserIsIE = false;
    };
 // primary and secondary nav hover for IE < 9
    if (browserIsIE == true) {
        $(".primary-nav li, .secondary-nav li").hover(function () {
            $(this).addClass("hover");
        }, function () {
            $(this).removeClass("hover");
        });
    };

ご協力いただきありがとうございます。

4

2 に答える 2

1

主な問題は、 が にbrowserIsIE評価された場合false、何も起こらないことです。if ステートメントでは、ドロップダウン メニューにイベント ハンドラーをtrueアタッチする前に、それが必要です。hover

hoverそれを修正すると、タッチデバイスではできないことがすぐにわかります. この投稿https://ux.stackexchange.com/questions/14257/re-thinking-hover-functionality-with-touchscreens-in-mindでは、実装できるいくつかの優れたアイデアについて説明しています。

于 2012-10-01T15:39:27.283 に答える
0

問題は、ホバーイベントを監視していることです。モバイル デバイスにはホバー イベントはありません。カーソルがないため、ホバーする方法がありません。

ただし、ブラウザはそれを処理しようとします。

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

しかし、最善の選択肢は、モバイル ユーザーがホバリングできず、代わりに touchStart などを監視できないという事実を考慮して設計することです。

于 2012-10-03T20:50:13.380 に答える