1.html部分:
JqueryMenu.html源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery实例2:弹出菜单</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<a href="#">诗歌</a>
<li><a href="#" id="a.html">乡愁(余光中)</a></li>
<li><a href="#" id="b.html">赋得古原草送别(白居易)</a></li>
</ul>
<ul>
<a href="#">技术</a>
<li><a href="#">Flex/AIR</a></li>
<li><a href="#">Silverlight</a></li>
</ul>
<ul>
<a href="#">体育</a>
<li><a href="#" id="a.html">足球(欧洲风云)</a></li>
<li><a href="#" id="b.html">篮球(NBA战火)</a></li>
</ul>
<div id="content"></div>
</body>
</html>
2.css代码
menu.js源代码:
/*让所有li的小圆点都不显示,可以使用css的标签选择器*/
li {
/*让li前面的小圆点消失*/
list-style: none;
/*让子菜单向右移动一段距离,达到缩进的效果*/
margin-left: 15px;
/*让所有的子菜单都不显示*/
display: none;
}
a {
/*让链接的下划线消失*/
text-decoration: none;
}
3.JavaScript代码:
menu.js源代码:
//需要点击主菜单的按钮时,对应的子菜单可以显示,再次点击子菜单则隐藏
//需要编写代码时,在页面加载时,让所有的主菜单添加onclick事件
//保证主菜单点击时可以显示或者隐藏子菜单
//注册页面装载时执行的方法
$(document).ready(function() {
//这里首先需要找到所有的主菜单
//然后给所有的主菜单注册点击事件
var as = $("ul > a");
as.click(function() {
//这里需要找到当前的ul中的li,然后让li显示出来
//获取当前被点击的ul节点
var ulNode = $(this);
//找到当前a节点的所有li兄弟子结点
var lis = ulNode.nextAll("li");
//让子菜单显示或隐藏
lis.toggle("slow");
//局部刷新
$("li > a").click(function() {
$("#content").load($(this).attr("id"));
});
});
});
ok,代码已经贴完,现在我们看一看效果图吧。
- 大小: 28.5 KB
分享到:
相关推荐
JQuery可收缩展开的级联菜单与局部刷新
网上找了很久这种菜单,浪费了很多时间,实在没办法,只好老老实实去官网上按说明弄了一个,并更新了,jquery1.5.2, 希望给有需要的朋友可以节约一点时间,欢迎交流,qq:170262
NULL 博文链接:https://lc2586.iteye.com/blog/727573
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单...
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单
jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单
菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联
级联菜单 动态级联菜单 可能动态取数据
JQuery实例-年月日级联菜单.rar
完整可运行的用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)
jquery级联菜单
Ajax(jQuery)全国城市三级级联菜单插件,简单易用
AJAX实例的级联菜单,初学AJAX。
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单
这是一个利用了Ajax技术的一个Jquery实例,动态的生成级联的下拉列表框,在中关村zol中经常可以看到。如果遇到无法显示的情况,请自己阅读代码。
无刷新的级联菜单,一级级选,Jquery,Ajax,无刷新加载数据!
工作分享:jquery+ajax框架实现4级级联菜单,废话不多说,直接上代码,可以直接用
使用jQuery来实现级联菜单的一般步骤如下: •1.首先使用和创建一个级联菜单 代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><...