Posted on 2008-11-18 18:27
eyejava 閱讀(252)
評論(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>
我是菜單1
<li>我是二級菜單1</li>
<li>我是二級菜單2</li>
</ul>
<ul>
我是菜單2
<li>我是二級菜單1</li>
<li>我是二級菜單2</li>
</ul>
<ul>
我是菜單3
<li>我是二級菜單1</li>
<li>我是二級菜單2</li>
</ul>
<ul>
我是菜單4
<li>我是二級菜單1</li>
<li>我是二級菜單2</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");
});
});
遇到的問題是:用IE瀏覽器點擊一級菜單時,會影響到下面的一級菜單,會閃動一下,而用firefox就沒有這個問題,不知道這是原因造成的
請大家一起找找看啊,謝謝