Question

我试图用这段代码制作一个弹出菜单：

$(document).mouseup(function (e) {
    if(document.documentElement.clientWidth < 768 && $(".sider-inner").is(":visible")){
        if (!$(".sider-inner").is(e.target) && $(".sider-inner").has(e.target).length == 0) {
            $(".sider-inner, .main-wrapper").animate({'left':"-=220"}, 500, 'swing', function(){
                $(".sider-inner").hide();
            });
        }
    }
});

$(document).on("swiperight", function(){
    if(document.documentElement.clientWidth < 768 && !$(".sider-inner").is(":visible")){
        $(".sider-inner").show();
        $(".sider-inner, .main-wrapper").animate({'left':"+=220"}, 500);
    }
});

它适用于移动设备，但使用小宽度桌面时，菜单会在向右滑动后立即隐藏。我该如何解决这个问题？

Answer 1

好吧我已经解决了自己^^ 这是我的固定代码：

$(document).mousedown(function (e) {
    if(document.documentElement.clientWidth < 768 && $(".sider-inner").is(":visible")){
        pageX = e.pageX;
        pageY = e.pageY;
    }
});

$(document).mouseup(function (e) {
    if(document.documentElement.clientWidth < 768 && $(".sider-inner").is(":visible")){
        if (!$(".sider-inner").is(e.target) && $(".sider-inner").has(e.target).length == 0) {
            if(e.pageX != pageX) return;
            if(e.pageY != pageY) return;
            $(".sider-inner, .main-wrapper").animate({'left':"-=220"}, 500, 'swing', function(){
                $(".sider-inner").hide();
            });

        }
    }
});

尝试通过Jquery mobile制作弹出菜单

1 个答案: