首页手机软件手机游戏单机游戏资讯文章专题下载游戏合集文章合集 php下载 php教程电脑软件

+ -

当前位置：首页 → 问答吧 → jquery做菜单时遇到的问题

jquery做菜单时遇到的问题

时间：2010-01-25

来源：互联网

用jquery做了个横向二级导航，在ie6,7,8以及opera下均正常，但是到了火狐下面会有严重问题
就是当我鼠标移到子菜单上并快速离开再回来时，子菜单会不停的收起，放下，收起，再放下。
发生的几率很大。
还请高人解决问题。
html

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript" src="jq/nav.js"></script>
</HEAD>
<BODY>
<div id="nav">
<ul>
<li class="main"><a href="index.html">1</a></li>
<li class="main"><a href="###">2</a>
<ul class="minor">
<li><a href="###">21</a></li>
<li><a href="###">22</a></li>
</ul>
</li>
<li class="main"><a href="###">3</a>
<ul class="minor">
<li><a href="###">31</a></li>
<li><a href="###">32</a></li>
<li><a href="###">33</a></li>
<li><a href="###">34</a></li>
<li><a href="###">35</a></li>
</ul>
</li>
<li class="main"><a href="###">4</a>
<ul class="minor">
<li><a href="###">41</a></li>
<li><a href="###">42</a></li>
<li><a href="###">43</a></li>
</ul>
</li>
<li class="main"><a href="###">5</a>
<ul class="minor">
<li><a href="###">51</a></li>
<li><a href="###">52</a></li>
</ul>
</li>
<li class="main"><a href="###">6</a></li>
</ul>
</div>
</BODY>
</HTML>

js

复制代码

$(document).ready(function(){
$(".main").hover(function(){
var mainNode = $(this).children("ul");
timeoutid = setTimeout(function() {
mainNode.slideDown("slow");
}, 200);
},function(){
$(this).children("ul").slideUp("slow");
clearTimeout(timeoutid);
});
})

css

复制代码

*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
}
a{
text-decoration:none;
display:block;
display:inline-block;
}
.main{
position:relative;
float:left;
background:#000;
}
.main a{
width:110px;
padding-left:20px;
color:white;
}
.minor{
position:absolute;
left:0;
top:16px;
background:#eee;
display:none;
}

作者: rickykurt 发布时间: 2010-01-25

相关阅读更多

热门阅读

office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐附激活工具
阅读：74
如何安装mysql8.0
阅读：31
Word快速设置标题样式步骤详解
阅读：28
20+道必知必会的Vue面试题（附答案解析）
阅读：37
HTML如何制作表单
阅读：22
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
ET文件格式和XLS格式文件之间如何转化？
阅读：24
react和vue的区别及优缺点是什么
阅读：121
支付宝人脸识别如何关闭?
阅读：21
腾讯微云怎么修改照片或视频备份路径?
阅读：28

热门下载

更多