尝试用Jquery制作弹出式移动菜单

Try to make popup menu by Jquery mobile

本文关键字：弹出式 移动 菜单 Jquery      更新时间：2023-09-26

我想用这个代码做一个弹出式菜单:

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

它可以在移动设备上工作，但在小宽度的桌面，菜单将在右滑后立即隐藏。我怎样才能解决这个问题?

好了，我自己解决了^^这是我的固定代码:

$(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();
            });
        }
    }
});
相关文章：