您的位置：首页 > Web前端 > JQuery

Jquery实例2：可收缩展开的级联菜单与局部刷新

2009-10-18 02:34 459 查看
.html部分：

JqueryMenu.html源代码：

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
>



<!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源代码：

Js代码



/*让所有li的小圆点都不显示，可以使用css的标签选择器*/

li {

/*让li前面的小圆点消失*/

list-style: none;

/*让子菜单向右移动一段距离，达到缩进的效果*/

margin-left: 15px;

/*让所有的子菜单都不显示*/

display: none;

}

a {

/*让链接的下划线消失*/

text-decoration: none;

}

/*让所有li的小圆点都不显示，可以使用css的标签选择器*/
li {
/*让li前面的小圆点消失*/
list-style: none;
/*让子菜单向右移动一段距离，达到缩进的效果*/
margin-left: 15px;
/*让所有的子菜单都不显示*/
display: none;
}

a {
/*让链接的下划线消失*/
text-decoration: none;
}


3.JavaScript代码：

menu.js源代码：

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"

));

});

});

});

//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏

//需要编写代码时，在页面加载时，让所有的主菜单添加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,代码已经贴完，现在我们看一看效果图吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航