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

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和return 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#

但需要一些造型工作和一个错误照顾（当你“悬停”/点击某个李时，lis似乎会移动。祝你好运。