Question

以下代码显示了一个名为#wrap-footer的菜单，当您点击#menu-button时将其向下滑动。单击页面上除菜单之外的任何位置都会使其向上滑动。

当菜单可见时#menu-button添加了一个名为'menu-open'的类（用于样式）。再次隐藏菜单时，将删除该类。

注意，我使用了选择器#wrap-header，#wrap-pre-footer，#wrap-content，而不只是html或document，因为iPhone无法识别这些。

$(document).ready(function(){
    $("#menu-button a").hide();
    $('#menu-button').append('Menu');

    $('#wrap-header,#wrap-pre-footer,#wrap-content').click(function() {
        $('#wrap-footer').slideUp('slow');
        $('#menu-button').removeClass('menu-open');
    });

    $('#menu-button').click(function(event){
       event.stopPropagation();
       $('#menu-button').toggleClass('menu-open');
       $('#wrap-footer').slideToggle('slow');
    });

    $("#wrap-footer").click(function(e) {
       e.stopPropagation();
    }); 
});

在桌面浏览器上，一切都很好。但是在iPhone上，slideToggle工作正常，但是toggleClass永远不会删除该类。因此，如果菜单已打开，则点击该页面（但不是#menu-button或#wrap-footer）会最小化菜单并删除该课程，但点击#menu-button只会最大限度地减少菜单，并且不会删除类。

谢谢

Answer 1

原来js很好。真正的问题是css悬停类。在iPhone上，您单击的最后一个元素仍然是悬停状态。删除css悬停类（我的移动网站版本不需要）修复此问题。

iPhone上的jquery toggleclass bug

1 个答案: