我做了一个jsfiddle来隔离问题的代码,但问题是:我无法用jsfiddle版本重现这个bug,我找不到为什么会有这个bug。
这是了解代码的jsfiddle:
http://jsfiddle.net/dragouf/mqVmC/35/
// when click show side panel
$('#' + prefix + '-btn').click(function () {
$(this).toggleClass('open');
// Hide all other boxes
var boxes = $('.box-container');
$.each(boxes, function (index, box) {
if ($(box).data('prefix') != prefix)
hideBoxes($(box).data('prefix'), true);
});
var right = $('#' + prefix + '-container').css('right');
var width = $('.' + prefix + '-box').outerWidth();
var rightHide = '-' + width.toString() + 'px';
var zindex = 180;
if (right != '0px') {
rightHide = '0px';
zindex = 1000;
$('#cart-container').css('z-index', zindex);
}
$('#' + prefix + '-container').stop(true, true).animate({ right: rightHide }, 800, function () {
// Animation complete.
$('#cart-container').css('z-index', zindex);
});
return false;
});
// hide after loading
hideBoxes(prefix, false);
// recalculate when div resized
$('.' + prefix + '-container').bind('DOMSubtreeModified', function () {
if (window[prefix + 'width'] != $(this).width())
hideBoxes(prefix, false);
window[prefix + 'width'] = $(this).width();
window[prefix + 'height'] = $(this).height(); // pas utiilise pour le moment
});
// recalculate when window resize
$(window).resize(function () {
hideBoxes(prefix, false);
});
// Follow window scroll
$(window).scroll(function () {
if ($(window).scrollTop() > 80) {
//$('#' + prefix + '-container').animate({ top: (defaultTop - 80) }, 200);
$('#' + prefix + '-container').css('top', (defaultTop - 80) + 'px');
} else {
$('#' + prefix + '-container').stop(true, true).css('top', defaultTop + 'px');
}
});
}
在这里我有这个bug的网站:
要重现它,只需在移动Safari(ipad或iphone)中找到此网址,将项目添加到购物车(第一次添加项目时它将消失< - bug)并重新加载页面。每次完成从服务器重新加载购物车时,购物车菜单都会消失...
如果有人理解这个错误,我会非常感激