<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<title>
</title>
<style type="text/css">
#menu {width:300px;}
.hasChildren {background:#555;color:#fff;sursor:pointer;}
.hightLight {color: #fff; background:green;}
div{padding:0;margin:10px 0;}
div a{background:#888;display:none;float:left;width:300px;}
</style>
<body>
<script type="text/javascript">
$(document).ready(
function(){
$(".hasChildren").click(
function()
{
$(this).addClass("hightLight");
$(this).children("a").show();
$(this).siblings().removeClass("hightLight");
$(this).siblings().children("a").hide();
}
);
});
</script>
<div id="menu">
<div class="hasChildren">
<span>第一章</span>
<a>---第一节</a>
<a>---第二节</a>
</div>
<div class="hasChildren">
<span>第二章</span>
<a>---第一节</a>
<a>---第二节</a>
</div>
</div>
</body>
</html>
