87,903
社区成员
发帖
与我相关
我的任务
分享为什么调用函数的时候，被调用的函数中if会出现失效的情况
想做个自适应宽度导航栏...简化的代码如下，大佬们帮我看看哪里出了问题
问题就在于，当窗口小于1080时，鼠标移上去同样会alert，但是把alert这一行放在mouseover外面就不会，这是什么问题呢，是我哪里错了嘛……我的基础不是很牢...谢谢大家了
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外面就不会，这是什么问题呢，是我哪里错了嘛……我的基础不是很牢...谢谢大家了
...全文
请发表友善的回复…
发表回复
天际的海浪 2018-06-18
- 打赏
- 举报
那么这样
<!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>
qq_42473245 2018-06-18
- 打赏
- 举报
可是我下面也写了一个mouseleave，这样也不行吗，另外，这个函数里面还有一个scroll function，和mouseover，mouseleave 一样都不受宽度的控制了如果要改的话工作量可能很大....[/quote]
那就在每个事件里面判断
<!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>
qq_42473245 2018-06-18
- 打赏
- 举报
这样做也没有效果，还是和之前一样...[/quote]
那document_Width输出的值是多少？[/quote]输出的值是真实的，就算小于1080时也会输出真实值
ambit_tsai-微信 2018-06-17
- 打赏
- 举报
一旦用mouseover方法进行绑定，没有手动移除，肯定会一直生效的。
如果想让alert只在document_Width大于等于1080时触发，要么像一楼那样不断的移除、添加，要么在mouseover中做下判断。
$(".navbottom li").mouseover(function(){
if(document_Width>= 1080){
alert(document_Width);
}
});
ambit_tsai-微信 2018-06-17
- 打赏
- 举报
这样做也没有效果，还是和之前一样...[/quote]
那document_Width输出的值是多少？
qq_42473245 2018-06-17
- 打赏
- 举报
这样做也没有效果，还是和之前一样...
qq_42473245 2018-06-17
- 打赏
- 举报
可是我下面也写了一个mouseleave，这样也不行吗，另外，这个函数里面还有一个scroll function，和mouseover，mouseleave 一样都不受宽度的控制了如果要改的话工作量可能很大....
天际的海浪 2018-06-17
- 打赏
- 举报
可是我下面也写了一个mouseleave，这样也不行吗，另外，这个函数里面还有一个scroll function，和mouseover，mouseleave 一样都不受宽度的控制了如果要改的话工作量可能很大....[/quote]
那就在每个事件里面判断
<!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>
天际的海浪 2018-06-16
- 打赏
- 举报
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>
