为什么调用函数的时候，被调用的函数中if会出现失效的情况

想做个自适应宽度导航栏...简化的代码如下，大佬们帮我看看哪里出了问题var navbar_Reload = function(){
if(document_Width>= 1080)
{
$(".navbottom li").mouseover(function(){
alert(document_Width);
}
}
$(window).resize(function(){
document_Width = document.body.clientWidth;
navbar_Reload();
});问题就在于，当窗口小于1080时，鼠标移上去同样会alert，但是把alert这一行放在mouseover外面就不会，这是什么问题呢，是我哪里错了嘛……我的基础不是很牢...谢谢大家了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

resize事件可能多次触发，要先移除上一次的mouseover事件。再来判断要不要重新绑定mouseover事件<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</style>
</head>
<body><ul class="navbottom">
<li>xxxxxxxxxxxxx</li>
</ul><script type="text/javascript">
var navbar_Reload = function(w){
$(".navbottom li").off("mouseover");
if(w >= 1080)
{
$(".navbottom li").mouseover(function(){
alert(w);
});
}
}
function onre(){
var document_Width = document.body.clientWidth;
navbar_Reload(document_Width);
}
$(window).resize(onre);
$(window).ready(onre);
</script>
</body>
</html>
一旦用mouseover方法进行绑定，没有手动移除，肯定会一直生效的。
如果想让alert只在document_Width大于等于1080时触发，要么像一楼那样不断的移除、添加，要么在mouseover中做下判断。$(".navbottom li").mouseover(function(){
if(document_Width>= 1080){
alert(document_Width);
}
});
可是我下面也写了一个mouseleave，这样也不行吗，另外，这个函数里面还有一个scroll function，和mouseover，mouseleave 一样都不受宽度的控制了如果要改的话工作量可能很大....
那document_Width输出的值是多少？
那就在每个事件里面判断<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</style>
</head>
<body><ul class="navbottom">
<li>xxxxxxxxxxxxx</li>
</ul><script type="text/javascript">
var document_Width;
var navbar_Reload = function(){
$(".navbottom li").mouseover(function(){
if (document_Width < 1080) return;
console.log("mouseover",document_Width);
});
$(".navbottom li").mouseleave(function(){
if (document_Width < 1080) return;
console.log("mouseleave",document_Width);
});
}
function onre(){
document_Width = document.body.clientWidth;
}
$(window).resize(onre);
$(window).ready(function () {
navbar_Reload();
onre();
});
</script>
</body>
</html>
那document_Width输出的值是多少？输出的值是真实的，就算小于1080时也会输出真实值
那就在每个事件里面判断<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</style>
</head>
<body><ul class="navbottom">
<li>xxxxxxxxxxxxx</li>
</ul><script type="text/javascript">
var document_Width;
var navbar_Reload = function(){
$(".navbottom li").mouseover(function(){
if (document_Width < 1080) return;
console.log("mouseover",document_Width);
});
$(".navbottom li").mouseleave(function(){
if (document_Width < 1080) return;
console.log("mouseleave",document_Width);
});
}
function onre(){
document_Width = document.body.clientWidth;
}
$(window).resize(onre);
$(window).ready(function () {
navbar_Reload();
onre();
});
</script>
</body>
</html>
我又试了一下，还是不起作用，即使在里面加判断条件之后还是不受控制，窗口宽度改变之后只有刷新能恢复正常...可是刷新的话太影响体验了
那么这样
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</style>
</head>
<body><ul class="navbottom">
<li>xxxxxxxxxxxxx</li>
</ul><script type="text/javascript">
$(window).ready(function () {
$(".navbottom li").mouseover(function(){
if (document.body.clientWidth < 1080) return;
console.log("mouseover");
});
$(".navbottom li").mouseleave(function(){
if (document.body.clientWidth < 1080) return;
console.log("mouseleave");
});
});
</script>
</body>
</html>