我在Chrome和Safari中的$(window).load函数中遇到了jQuery css(' width')值的问题。
正常行为:
页面加载,访问者悬停菜单的一个元素,子菜单显示正确的列宽。
实际错误发生在:
用户访问网站,不等到页面完全加载以悬停菜单项...几秒钟后子菜单的列会崩溃。
您可以在http://www.pharmagooddeal.fr/beta678/上看到它(使用Chrome或Safari)。这是一个截图:
基本上发生的事情是JS文件启动以在窗口加载时调整不同菜单元素的大小。
这是脚本的内容(我自己没有编写代码):
$(window).load(function(){
resizeWidth();
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
var TO = false;
$(window).resize(function(){
if(TO !== false)
clearTimeout(TO);
TO = setTimeout(resizeWidth, 400); //400 is time in miliseconds
});
function resizeWidth()
{ var number1=123.15;
var number=Math.round(number1).toFixed(2);
var menuWidth = 1180;
var numColumn = 5;
var currentWidth = $("#menu").width()-2;
if (currentWidth < menuWidth) {
new_width_column = currentWidth / numColumn;
$('#menu div.options_list').each(function(index, element) {
var options_list = $(this).next();
var span_options_list = options_list.attr('styleWidth');
console.log('Span options list: ' + span_options_list);
$(this).width(parseFloat(span_options_list)/menuWidth*numColumn * new_width_column);
});
$('#menu div.option').each(function(index, element) {
var option = $(this).next();
var woption=parseFloat(option.css("width"))/menuWidth*numColumn * new_width_column-0.5;
console.log('Option CSS Width: ' + option.css("width"));
console.log('Option Width: ' + option.width());
console.log('Option Inner Width: ' + option.innerWidth());
console.log('Option Outer Width: ' + option.outerWidth());
console.log('Menu Width: ' + menuWidth);
console.log('Num column: ' + numColumn);
console.log('New width column: ' + new_width_column);
console.log('Woption: ' + woption);
var woption1=Math.round(woption).toFixed(2);
$(this).width(woption1);
console.log('Woption1: '+woption1);
console.log('-----------------');
var wul= parseFloat(option.css("width"))/menuWidth*numColumn * new_width_column-0.5;
var wul1=Math.round(wul).toFixed(2);
$("ul", this).width(parseFloat(option.css("width"))/menuWidth*numColumn * new_width_column);
});
$('#menu ul.column').each(function(index, element) {
var column = $(this).next();
var wul=parseFloat(column.css("width"))/menuWidth*numColumn * new_width_column-0.5;
var wul1=Math.round(wul).toFixed(2);
$(this).width(wul1);
});
}
$('#menu ul > li > a + div').each(function(index, element) {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
i = (dropdown.left + $(this).width()) - (menu.left + $('#menu').width());
if (i > 0) {
$(this).css('margin-left', '-' + i + 'px');
}
else
$(this).css('margin-left', '0px');
});
}
});
如果你向下滚动到&#34;函数resizeWidth()&#34;,你可以在下面看到一堆console.log,我想出了它出错的地方:
console.log('Option CSS Width: ' + option.css("width"));
如果我在我悬停菜单元素之前等到页面加载,则返回正常值,如果我在页面加载完成之前将其悬停,则返回0。
我尝试了不同的东西,但我无法弄清问题是什么。以下是其他控制台日志返回的内容:
Option CSS Width: 0px
csmegamenu_front.js:59 Option Width: 0
csmegamenu_front.js:60 Option Inner Width: 0
csmegamenu_front.js:61 Option Outer Width: 0
csmegamenu_front.js:62 Menu Width: 1180
csmegamenu_front.js:63 Num column: 5
csmegamenu_front.js:64 New width column: 235.6
csmegamenu_front.js:65 Woption: -0.5
csmegamenu_front.js:68 Woption1: 0.00
提前感谢您的帮助。