2

我正在使用我自己的 css 而不是引导程序在一个响应式网站上工作。

在 iPhone 上的 safari 和 Android 上的 chrome 上，导航是错误的。

如果您在菜单中打开一个类别并尝试滚动菜单将关闭。

4

4 回答 4

6

我在调试时注意到您的 $(window).resize 函数在用户滚动时被调用。如果宽度没有改变，您可以简单地忽略调整大小事件，它将解决您的问题。

$(window).resize(function(){

    if ( width == GetWidth() ) {
        return;
    }

    width = GetWidth();

    if(width >= 768){
        $("#logo").removeClass("front");
        $("#icon-bar .front").removeClass("front");
        $("#main-navi").show();
        $("#main-navi>li ul").hide();
        $("#main-navi .dropped").removeClass('dropped');
    } else {
        $("#main-navi").hide();
    }
});

如果您遇到麻烦，请告诉我！

于 2013-08-09T01:33:13.360 回答
2

如果您可以访问 mac，那么您可以进行远程调试，以查看在切换菜单选项时页面上的 css 发生了什么。

请参阅如何在 iOS6 上设置远程调试或 safari

于 2013-08-08T07:41:21.160 回答
0

相当简单的问题。移动设备没有固定的鼠标。这意味着悬停不起作用！做一个简单的工作，如：

单击一次以打开菜单 -> 单击 agin 以单击菜单项 -> 并关闭菜单

当打开并且用户不想单击任何菜单项时 -> 单击菜单旁边的 -> 关闭菜单

真的很简单，祝你好运

于 2013-08-02T22:43:33.880 回答
0

如果您禁用 touchmove 上的点击事件，它会起作用吗？

function clickEvent() {
    if($("#logo").hasClass('front')){
        $("#main-navi").stop(true, true).slideToggle(250, function(){
            $("#logo").toggleClass("front");
            $("#dropdown").toggleClass("front");
        });
    } else {
        $("#main-navi").stop(true, true).slideToggle(250);
        $("#logo").toggleClass("front");
        $("#dropdown").toggleClass("front");
    }
}


$("#dropdown").on({
        click: clickEvent,

        touchmove: function() {
            $(this).off('click', clickEvent);
        },

        touchend: function() {
            $(this).on('click', clickEvent);
        }
});
于 2013-08-09T00:50:53.007 回答