Posted on 2008-11-18 18:27
eyejava 阅读(242)
评论(0) 编辑 收藏
今天练习用jquery写一个级联菜单的小例子，遇到的一个问题，请大家帮忙看一下原因所在。
涉及到的内容有：
页面JqueryMenu.html－－－－－－－－
<html>
<head>
<title>JqueryMenu.html</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jquerymenu.js"></script>
<link type="text/css" rel="stylesheet" href="css/menu.css"></link>
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
我是菜单１
<li>我是二级菜单１</li>
<li>我是二级菜单２</li>
</ul>
<ul>
我是菜单２
<li>我是二级菜单１</li>
<li>我是二级菜单２</li>
</ul>
<ul>
我是菜单3
<li>我是二级菜单１</li>
<li>我是二级菜单２</li>
</ul>
<ul>
我是菜单4
<li>我是二级菜单１</li>
<li>我是二级菜单２</li>
</ul>
</body>
</html>
----------------------------------------
js文件jquery.js 和自己写的jquerymenu.js，内容如下：
//注册页面加载时的执行的事件
$(document).ready(function() {
//得到所有的ul标签标点
var uls = $("ul");
//为ul标签增加mouseover事件
uls.mouseover(function() {
//得到当前ul结点
var ulNode = $(this);
//将鼠标形状改为手形
ulNode.css("cursor", "pointer");
});
//为ul标签增加单击事件
uls.click(function() {
//找到当前ul标签结点
var ulNode = $(this);
//得到子标签li
var lis = ulNode.children("li");
lis.toggle("show");
});
});
遇到的问题是：用ＩＥ浏览器点击一级菜单时，会影响到下面的一级菜单，会闪动一下，而用firefox就没有这个问题，不知道这是原因造成的
请大家一起找找看啊，谢谢