jquery弹出菜单

songwensheng · 发表于 2013-2-7 23:27:48

在WebRoot下新建jqueryLib文件夹并在jqueryLib文件夹下放入jquery-1.4.1.js（jquery库文件）和jqueryMenu.js弹出菜单的脚本文件。

jqueryMenu.html文件内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jquery应用示例：弹出菜单</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript" src="jqueryLib/jquery-1.4.1.js"></script>
<script type="text/javascript" src="jqueryLib/jqueryMenu.js"></script>
</head>
<body>
<ul><a href="#">菜单1</a>
     <li><a href="#" id="jqueryWindow.html">子菜单1</a></li>
     <li><a href="#" id="jqueryWindow.html">子菜单2</a></li>
</ul>

<ul><a href="#">菜单2</a>
      <li><a href="#" id="MyHtml.html">子菜单3</a></li>
      <li><a href="#" id="MyHtml.html">子菜单4</a></li>
</ul>
<div id="content"></div>
</body>
</html>

menu.css文件内容如下：
/*让所有的li都不显示小圆点，可以使用css的标签选择器*/
li {
list-style: none;/*使前面的小圆点不显示*/
margin-left: 18px;/*让子菜单想右移动*/
display: none;/*让子菜单默认隐藏*/

}
a {
text-decoration: none ;/*让连接下划线去掉*/
}

jqueryMenu.js文件内容如下：
//点击主菜单的按钮时显示子菜单在点击则隐藏
//注册页面装载时执行的方法
$(document).ready(function() {
//首先找到所有的主菜单
//找到ul的节点
var as = $("ul>a");
//给主菜单注册点击事件
as.click(function(){
  //获取当前被点击的a节点
  var aNode = $(this);
  //找到当前a中的li兄弟节点
  var lis = aNode.nextAll("li");
  //让子节点显示或隐藏
  lis.toggle("show");
});
$("li>a").click(function() {
  $("#content").load($(this).attr("id"));//加载页面
});
});
只是个简单的例子供学习之用！

		自动登录	找回密码
密码			立即注册

jquery弹出菜单

浏览过的版块