这段代码哪里有点问题，请高手指点。
最近在学习JQUERY，发现书中有一段代码，实际效果跟上面说的不一下，请高手帮忙看下，是不是书中写错了。书中说应该是单击不同商品称链接，显示相应的内容，同时高亮显示当前选择的商品。初期化只显示商品名称，不显示商品的内容，但是实际效果是这段JQUERY没有效果，同时商品名称和内容都显示出来了，怎么回事儿？
代码如下：
- HTML code
<head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="D:\Study\Jquery\jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(".level1 > a").click(function(){ $(this).addClass("current") .next().show() .parent().siblings().children("a").removeClass("current") .next().hide(); return false; }); </script> </head> <body> <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="level2"> <li><a href="#none">短袖衬衫</a></li> <li><a href="#none">长袖衬衫</a></li> <li><a href="#none">短袖T恤</a></li> <li><a href="#none">长袖T恤</a></li> </ul> </li> <li class="level1"> <a href="#none">卫衣</a> <ul class="level2"> <li><a href="#none">开襟卫衣</a></li> <li><a href="#none">套头卫衣</a></li> <li><a href="#none">运动卫衣</a></li> <li><a href="#none">童装卫衣</a></li> </ul> </li> <li class="level1"> <a href="#none">裤子</a> <ul class="level2"> <li><a href="#none">短裤</a></li> <li><a href="#none">休闲裤</a></li> <li><a href="#none">牛仔裤</a></li> <li><a href="#none">免烫卡其裤</a></li> </ul> </li> </ul> </div> </body>[解决办法]
..............执行顺序啊，你js都执行完了，你的html代码才加载，怎么可能会有效果。
把js代码放body最后，或者用
$(document).ready(function(
///你的代码放这里
))