jquery级联菜单效果

liaokang.java · 发表于 2013-2-7 20:14:47

jquery在前台客户端的处理有很大的优势，其类库小但功能实用，受到Web前端开发人员很大的青睐，下面是一个级联菜单和局部刷新的小例子
前端html代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>可收缩的级联菜单</title> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/menu.js"></script> <link type="text/css" rel="stylesheet" href="css/menu.css"/></head><body> <ul> <a href="#">我是主菜单1</a> <li><a href="#" id="a.html">我是子菜单11</a></li> <li><a href="#" id="b.html">我是子菜单12</a></li> </ul> <ul> <a href="#">我是主菜单2</a> <li><a href="#">我是子菜单21</a></li> <li><a href="#">我是子菜单22</a></li> </ul> <div id="content"></div></body></html>
js代码如下
$(Document).ready(function(){ var as = $("ul > a"); as.click(function(){ //在文档加载之后为ul下的所有a节点注册鼠标点击事件 var aNode = $(this); var lis = aNode.nextAll("li"); lis.toggle("show"); //当a被点击其所有的兄弟节点li隐藏或显示 }); var as = $("li > a"); //得到所有li节点下的a节点元素 as.click(function(){ //为每个a节点元素注册鼠标点击事件 var aNode = $(this); $("#content").load(aNode.attr("id")); //当鼠标点击时，为id为content的div加载文档 });});css代码如下li{ list-style: none; /*取出小黑点*/ margin-left: 10px; display: none; text-decoration: none; /*去掉下划线*/}a { text-decoration: none;}

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

jquery级联菜单效果

浏览过的版块