通过例子学习Jquery导航栏菜单_H5之家 - 中国HTML5教程资源分享第一站

如果只看JQuery 的语法以及一些API，可能影像不太深刻，为了加深记忆，我通过例子来更好的学习，理解。

1. 导航栏菜单

效果：点击父节点，父节点变色，其子节点全部展开，其他没被点击的父节点的子节点全部影藏。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Resources/jquery-1.4.2.js"></script>//引入Jquery库
<title>导航栏菜单</title>
<style type="text/css">
.Charter
{
background-color:Red;

cursor:pointer;
}
.ChangeColor
{
background:green;
}

#meau
{
width:300px;
}
div a{
background : blue;
display : none;
float:left;
width:300px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".Charter").click(function(){
$(this).addClass("ChangeColor").children("a").show().end().siblings().removeClass("ChangeColor").children("a").hide();
});
});
</script>
</head>
<body>
<form runat="server">
<div>
<div>
<span>第一章</span>
<a>第一章第一节</a>
<a>第一章第二节</a>
<a>第一章第三节</a>
<a>第一章第四节</a>
</div>
<div>
<span>第二章</span>
<a>第二章第一节</a>
<a>第二章第二节</a>
<a>第二章第三节</a>
<a>第二章第四节</a>
</div>
</div>
</form>
</body>
</html>

在此例中关键代码为红色所标记的，首先来解释此例子中所用到的Jquery中的语法：

a.$(document).ready()

允许你绑定一个在DOM文档载入完成后执行的函数. 也就是说当DOM加载完成后，执行其中的函数

b.addClass(class)

c.children(string)

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

d.show().

显示隐藏的匹配元素, 相反， hide() 为隐藏元素。

e.end()

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。所谓的"破坏性"就是指任

何改变所匹配的jQuery元素的操作

f.siblings().

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

明白上述语法后，理解此例子代码中的红色部分就很容易了：

$(document).ready(function(){ //等待DOM加载完毕
$(".Charter").click(function(){ //为父节点添加click方法
$(this).addClass("ChangeColor") //为父节点添加类，即点击父节点时变色

.children("a").show() //父节点的所有含有标签<a>的子节点显示

.end()

.siblings().removeClass("ChangeColor").children("a").hide();

// 由于.end 的原因，此处相当于$(this).siblings().removeClass("ChangeColor").children("a").hide()
});
});

此例子介绍完毕，理解有误之处望指正，与您共同进步！

通过例子学习Jquery导航栏 菜单

通过例子学习Jquery导航栏菜单