Question

演示：http://admin.bigblackbag.net/web/mobile_content.asp?WebsiteID=15175&forcemobile=1

完美适用于iPhone ..但似乎在原生Android浏览器上崩溃..当你尝试使用导航菜单并且看起来没有正确调整时崩溃..任何想法？太漂亮了！？被困了几个星期..

$(function () {
var menuStatus;
// Show Menu
$("a.showMenu").click(function () {
    if (menuStatus != true) {
        $("#page").animate({
            marginLeft: "85%",
        }, 300, function () {
            menuStatus = true
        });
        $("#page").css("position","fixed");
        $("#page").addClass("shadow");            
        $("#menu").animate({opacity: "1"}, 300);
        return false;
    } else {
        $("#page").animate({
            marginLeft: "0px",
        }, 300, function () {
            menuStatus = false
        });
        $("#page").css("position","absolute");
        $("#page").removeClass("shadow");
        $("#menu").animate({opacity: "0"}, 300);
        return false;
    }
}); 
 // Menu behaviour
$("#menu li a").click(function () {
    var p = $(this).parent();
    if ($(p).hasClass('active')) {
        $("#menu li").removeClass('active');
    } else {
        $("#menu li").removeClass('active');
        $(p).addClass('active');
    }
  });   
});

Answer 1

试试这个：

$(function () {
var menuStatus;
// Show Menu
$("a.showMenu").click(function (e) {
    if (menuStatus != true) {
        $("#page").animate({
            marginLeft: "85%",
        }, 300, function () {
            menuStatus = true
        }).css("position","fixed").addClass("shadow");            
        $("#menu").animate({opacity: "1"}, 300);
    } else {
        $("#page").animate({
            marginLeft: "0px",
        }, 300, function () {
            menuStatus = false
        }).css("position","absolute").removeClass("shadow");
        $("#menu").animate({opacity: "0"}, 300);
    }
    e.preventDefault();
}); 
 // Menu behaviour
$("#menu li a").click(function () {
    $("#menu li").removeClass('active');
    $(this).parent().addClass('active');
  });   
});

移动应用程序适用于iPhone但不适用于Android

1 个答案: