0

这个问题是关于带有子菜单的列表菜单中的触摸事件。目的是通过一键操作（在移动设备上）-> 扩展，第二次触摸缩回。触摸另一个项目-> 它扩展和先前的缩回。

这就是问题所在：iPad 4.3.3 运行良好。iPhone 5.1 和 Android 4 - 第二次触摸缩回和延伸。不是想要的效果。在您的移动设备上查看示例。感谢您的关注。

这是 jQuery 或移动操作系统中的错误吗？

$(document).ready(function () {   
    if((navigator.userAgent.match(/iPhone|iPod|iPad|Android/i))) {
        $('#nav li').click(function(){
            // attach a click event listener to provoke iPhone/iPod/iPad's hover event
            // Amended the next 3 lines 
            var $this_li = $(this);  
            $('#nav li ul').slideUp(function() {
                $('ul', $this_li).slideDown();
            });
        });
    } else {
        // This part works in non-mobile browser
        $('#nav li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(200);
            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(200);         
            }
        ); 
    }  
});
4

2 回答 2

0

经过几个小时的反复试验，以下更改终于产生了反映触摸设备上悬停事件的预期效果。也就是说，对于具有子菜单的菜单项（使用 id 且没有类属性）：

  1. 如果子菜单已打开（隐藏），则向下滑动。
  2. 如果子菜单向下（可见），则向上滑动。

  3. 如果一个子菜单被按下并选择了另一个子菜单，则隐藏向下并向下滑动所选。

    $('#nav li').click(function() {
    var $selected_li = $(this); 
    if ($('ul', $selected_li).is(':visible')) {
        $('#nav li ul').slideUp();
    }
    else {
        $('#nav li ul').slideUp(function() {
            $('ul', $selected_li).slideDown();
        });
    }
});
于 2012-08-10T23:13:34.010 回答
0 
 var $this_li = $(this);  
 $('#nav li ul').slideUp(function() {
     $('ul', $this_li).slideDown();
 });

这段代码正在做它应该做的事情，你告诉 $(this) 向下滑动，但你也在向上滑动中捕获相同的项目，所以它向上然后向下滑动。

试试这个，而不是循环遍历导航项目的集合，将所有项目向上滑动，但单击的项目除外，然后仅向下滑动单击的项目。

//...in the click event
var $this_li = $(this);  
$('#nav li').each(function(index) {
    if ( this != $this_li ) {
        $('ul', this).slideUp();
    }
    else {
        $('ul', $this_li).slideDown();
    }   
});

我不是 jquery 专家，但这应该非常接近。

于 2012-08-08T19:15:23.163 回答