Question

我正在使用自己的css而不是bootstrap工作responsive site。

在iphone上的safari和onriod上的chrome上导航是错误的。

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

Answer 1

我注意到在调试时你的$（window）.resize函数在用户滚动时被调用。如果宽度没有改变，你可以简单地忽略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();
    }
});

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

Answer 2

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

请参阅How to set up remote dubugging or safari on iOS6

Answer 3

相当简单的问题。移动设备没有恒定的鼠标。这意味着徘徊不会工作！做一个简单的解决方法，如：

点击一次打开菜单 - ＆gt; 单击agian以单击菜单项 - ＆gt;和关闭菜单

打开时，用户不想点击任何菜单项 - ＆gt;点击菜单旁边的 - ＆gt;关闭菜单

真的很简单，好看

Answer 4

如果在touchmove上禁用click事件，它是否有效？

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

navbar在滚动时使用chrome / safari在移动设备上折叠

4 个答案: