[jquery] jq的菜单简单实现

[复制链接]

rogan

65 主题	3 好友	739 积分

超级版主

Rank: 8 Rank: 8

自我介绍: 新年第一天据说有雨，全民齐赏日出的计划恐要泡汤。”宋仁宗拍着包拯的肩，“朕决定把你悬挂在城门上。”“但微臣额上的不是太阳是月亮啊！”“没事，挂久一点就会升级成太阳
生肖: 虎
星座: 狮子座
性别: 男

发消息

电梯直达

楼主

发表于 2012-5-24 21:09:29 |只看该作者 |倒序浏览

<!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>