<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>我是二級(jí)菜單1</li>
<li>我是二級(jí)菜單2</li>
</ul>
<ul>
我是菜單2
<li>我是二級(jí)菜單1</li>
<li>我是二級(jí)菜單2</li>
</ul>
<ul>
我是菜單3
<li>我是二級(jí)菜單1</li>
<li>我是二級(jí)菜單2</li>
</ul>
<ul>
我是菜單4
<li>我是二級(jí)菜單1</li>
<li>我是二級(jí)菜單2</li>
</ul>
</body>
</html>
----------------------------------------
js文件jquery.js 和自己寫(xiě)的jquerymenu.js,內(nèi)容如下:
//注冊(cè)頁(yè)面加載時(shí)的執(zhí)行的事件
$(document).ready(function() {
//得到所有的ul標(biāo)簽標(biāo)點(diǎn)
var uls = $("ul");
//為ul標(biāo)簽增加mouseover事件
uls.mouseover(function() {
//得到當(dāng)前ul結(jié)點(diǎn)
var ulNode = $(this);
//將鼠標(biāo)形狀改為手形
ulNode.css("cursor", "pointer");
});
//為ul標(biāo)簽增加單擊事件
uls.click(function() {
//找到當(dāng)前ul標(biāo)簽結(jié)點(diǎn)
var ulNode = $(this);
//得到子標(biāo)簽li
var lis = ulNode.children("li");
lis.toggle("show");
});
});
遇到的問(wèn)題是:用IE瀏覽器點(diǎn)擊一級(jí)菜單時(shí),會(huì)影響到下面的一級(jí)菜單,會(huì)閃動(dòng)一下,而用firefox就沒(méi)有這個(gè)問(wèn)題,不知道這是原因造成的
請(qǐng)大家一起找找看啊,謝謝