Question

此问题与包含子菜单的列表菜单中的触摸事件有关。目的是通过一次触摸（在移动设备上）采取行动 - ＆gt;伸展，第二次触摸收缩。触摸其他项目 - ＆gt;它延伸和扩展以前的收回。

问题在于：iPad 4.3.3效果很好。 iPhone 5.1＆amp; Android 4 - 第二触摸收缩和扩展。不是预期的效果。从移动设备上查看example here。谢谢你的期待。

这是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);         
            }
        ); 
    }  
});

Answer 1

 var $this_li = $(this);  
 $('#nav li ul').slideUp(function() {
     $('ul', $this_li).slideDown();
 });

这段代码正在做它应该做的事情，你告诉$（this）slidedown，但是你也在幻灯片中捕获相同的项目，因此它向上滑动然后向下滑动。

尝试此操作，而不是遍历导航项的集合向上滑动所有这些，但点击一个，然后仅向下滑动单击的那个。

//...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专家，但那应该非常接近。

Answer 2

经过几个试验和错误时间之后，以下更改最终会对在触摸设备上镜像悬停事件产生预期效果。也就是说，对于带有子菜单的菜单项（使用id和没有类属性）：

如果子菜单已启用（隐藏），请向下滑动。
如果子菜单已关闭（可见），请滑动。

如果一个子菜单关闭而另一个子菜单被选中，则隐藏向下＆amp;向下滑动所选的。

$('#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();
        });
    }
});

如何定位元素

2 个答案: