3

誰かがここで私を助けてくれることを願って、少しの間これに苦労しています。タッチデバイスのエンドユーザーに、ドロップドウォンメニューを「クリック」してサブメニュー項目を表示する機能を提供する必要があります。これは、デスクトップエクスペリエンスの観点からは明らかに一般的なUX構造ですが、モバイルデバイスやタッチデバイスに関しては、理想的とは言えません。私はこれを理解していますが、それでも一時的な解決策としてこの経験を提供する必要があります。

そうは言っても、私は基本的に次のような簡単な方法を見つけようとしています。

  1. ユーザーが「タッチ」デバイスを使用しているかどうかを検出する
  2. 「true」の場合は、サブメニューを表示するためにドロップダウンメニューリンクをタップできるようにします。サブメニューリンクをクリックするか、メニュー領域の外に出るまで、このメニューを保持（開いたまま/表示したまま）にします（以下のjsFiddleで、ontouchstartを機能させることができますが、方法がわからないようです。それを永続化し、メニュー内のすべてのタグリンクで機能するようにします）。
  3. 「false」の場合、デフォルトの機能を許可します。

これが私がこれまでに持っている動作中のjsFiddleです：http：//jsfiddle.net/bingles/hPJVM/18/

また、これまでのjsコードは次のとおりです。

var submenu = document.getElementsByTagName('a')[0];

if ("ontouchstart" in window) {
    submenu.ontouchstart = function() {
        $(".simple-tabs li.deep").addClass("deep-hover");
    };
    submenu.ontouchend = function() {
        $(".simple-tabs li.deep").removeClass("deep-hover");
    };
}
else {
    $(".simple-tabs li.deep").hover(

    function() {
        $(this).addClass("deep-hover");
    }, function() {
        $(this).removeClass("deep-hover");
    });
    $(".simple-tabs.live li").each(function(i) {
        var parent = $(this);

        if ($(this).hasClass("current")) {
            $(".simple-tab-" + i).fadeIn("fast");
        }
        $(this).find("a").click(function() {
            parent.parent().find("li").removeClass("current");
            parent.addClass("current");
            $(".simple-tab").hide();
            $(".simple-tab-" + i).show();
            return false;
        });
    });
}​

私はまだjQueryを学んでいるので、期待したほど前進することができませんでした。どんな助けやガイダンスも大歓迎です！

前もって感謝します。

4

1 に答える 1

5

Modernizrを使用して、タッチ機能を検出できます

if (Modernizr.touch){
  // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
  // bind to normal click, mousemove, etc
}

jQuery on（）をリストとして使用して、タッチイベントを追加できます。例えば

$('some selector').on('click touchstart touchend', function(e) {
        e.preventDefault();
        //show the menu
    });

ノンタッチの場合

$('some selector').on('mouseover mouseout focusin focusout', function(e) {
        if (e.type === 'mouseover' || e.type === 'focusin') {
            //show the menu
        } else if (e.type === 'mouseout' || e.type === 'focusout') {
            //hide the menu
        }
    });

これらは、Modernizr.touch if/elseでラップする必要があります。サブメニューを開いたら閉じるには、ページの本文でタッチイベントが必要になる可能性があります（誰かが開いてメニューの項目をクリックしなかった場合）。

于 2012-09-11T13:25:18.483 に答える