<%@ 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>