Question

我的任务是使用一个使用CSS下拉菜单并使其响应的网站。由于手机没有悬停事件，我使用Modernizr在菜单中添加类来显示/隐藏它们。这很好用。问题是触摸父元素仍会导致手机导航到父元素，因此除非您超快，否则无法单击菜单中显示的子项。返回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的每个组合，并返回false。有没有人遇到过这个？

Answer 1

所以答案在于第一段代码。问题在于touchend事件。我试图阻止的默认实际上属于click事件，所以这里是我改变代码的方式。很容易解决。

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

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

Answer 2

我已经完成了大量的响应式设计，并找到了最佳解决方案，这是Chris Coyier为移动设备选择菜单的方法。这样你就可以利用每个手机对选择菜单的本机处理，这在大多数情况下比任何jQuery黑客都要好得多（更重要的是可预测的）。

http://css-tricks.com/convert-menu-to-dropdown/

希望有所帮助

Answer 3

我最近一直在寻找响应式css下拉菜单。这个下拉似乎在我的iPhone上正常工作：http://matthewjamestaylor.com/blog/centered-dropdown-menus#

但是需要一些样式工作和一个小心的处理（当你“悬停”/点击某个li时，lis似乎会移动祝好运。

响应式网站上的CSS下拉菜单导致移动电话出现问题

3 个答案: