jq的菜单简单实现 - SKY外语计算机学习

<!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" xml:lang="ru">
<head>
<title>1-5-1</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="lib/jquery/jquery-1.4.2.js">
</script>
<script language="javascript">
$(function(){
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的<a>元素显示出来
.siblings().removeClass("highlight") //并重新定位到上次操作的元素获
//取元素的兄弟元素，并去掉它们的
//highlight类
.children("a").hide(); //将兄弟元素下的<a>元素隐藏
});
});
</script>
<style type="text/css">
#menu {
width: 300px;
}
.has_children {
background: #555;
color: #fff;
cursor: pointer;
}
.highlight {
color: #fff;
background: green;
}
div {
padding: 0;
margin: 10px 0;
}
div a {
background: #888;
display: none;
float: left;
width: 300px;
}
</style>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章--认识jq</span>
<a>1.1-Javascript 和javascript库</a>
<a>1.2-加入jq</a>
<a>1.3-编写简单jq</a>
<a>1.3-编写简单jq</a>
</div>
<div class="has_children">
<span>第一章--认识jq</span>
<a>1.1-Javascript 和javascript库</a>
<a>1.2-加入jq</a>
<a>1.3-编写简单jq</a>
<a>1.3-编写简单jq</a>
</div>
<div class="has_children">
<span>第一章--认识jq</span>
<a>1.1-Javascript 和javascript库</a>
<a>1.2-加入jq</a>
<a>1.3-编写简单jq</a>
<a>1.3-编写简单jq</a>
</div>
</div>
</body>
</html>

复制代码