jquery - 响应式网站上的 CSS 下拉菜单导致手机出现问题

Question

我的任务是建立一个使用 CSS 下拉菜单的网站并使其具有响应性。由于手机没有悬停事件，我使用 Modernizr 向菜单添加类以显示/隐藏它们。这很好用。问题是触摸父元素仍然会导致手机导航到父元素，因此除非您速度超快，否则您无法单击出现在菜单中的子项。 Return false 和 preventDefault 都可以在我的 iphone 模拟器上运行，但在真实设备(android 和 iphone)上会失败。

//make sure main nav links don't take you anywhere on mobile

$('#a-popular-main-nav').on('touchend', function(event) {
    event.preventDefault();
    return false;
});

$('#a-profile-main-nav').on('touchend', function(event) {
    event.preventDefault();
    return false;
});


if (Modernizr.touch) {
    $('.menu').each(function () {
        var $lis = $(this).find('li');
        $lis.on('touchend', function(event) {

            var $this = $(this);
            if ($this.hasClass('activated')) {
                $this.removeClass('activated');
            }
            else {
                $lis.removeClass('activated');
                $this.addClass('activated');
            }
            event.stopPropagation();

       });

        //close menus if touched outside the menu
       $('body').on('touchend', function() {
               $lis.removeClass('activated');
       });


    });

};

我已经尝试了 stopPropagation、preventDefault 和 return false 的所有组合。有人遇到过这个吗？

Answer 1

所以答案就在第一段代码中。麻烦是 touchend 事件。我试图阻止的默认值实际上属于点击事件，所以这是我更改代码的方式。很容易修复。

$('#a-popular-main-nav').on('click', function(event) {
    event.preventDefault();
});

$('#a-profile-main-nav').on('click', function(event) {
    event.preventDefault();
});