3

希望有人可以在这里帮助我，一直在努力解决这个问题。我需要为触摸设备上的最终用户提供“单击”下拉菜单以显示子菜单项的能力。就桌面体验而言，这显然是一种常见的 UX 结构，但对于移动或触摸设备而言，它并不理想。我理解这一点，但同时仍需要提供这种经验作为临时解决方案。

话虽如此，我基本上是在尝试找到一种简单的方法：

  1. 检测用户是否在“触摸”设备上
  2. 如果为“真”，则允许他们点击下拉菜单链接以显示子菜单。允许此菜单持续存在（保持打开/显示），直到他们单击子菜单链接或菜单区域之外（在下面的 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 回答