工作中遇到的一个Jquery的比较典型的特效功能

其中HTML代码如下：

<div   id="firstpane"   class="menu_list">

<p   class="menu_head current">

家庭风格</p>

<div  style="display:none;"      class="menu_body"   id="rz_fenye">

<a>   中式 </a>

<a>   现代 </a>

<a>   现代简约 </a>

<a>   田园风格</a>

<a>   美式风格 </a>

<a>   欧式风格 </a>

<a>   日式风格 </a>

<a>   地中海风格</a>

<a>   东南亚风格</a>

<a>   后现代风格</a>

<a>   混搭风格</a>

</div>

<p   class="menu_head current">

家装流程</p>

<div  style="display:none;"      class="menu_body"   id="rz_fenye">

<a>   收房验房</a>

<a>   找装修公司</a>

<a>   量房设计 </a>

<a>   大胆点</a>

<a>   多大</a>

<a>   大胆点 </a>

<a>  对对对</a>

<a>   大大大</a>

<a>   的点点滴滴</a>

<a>   的点点滴滴</a>

</div>

.

.

.

.

</div>

后面几个就省略不写了 ，接下来就是jQuery代码：

$(function(){
$("#firstpane .menu_body:eq(0)").show();
$("#firstpane p.menu_head").click(function(){
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});

$("#secondpane .menu_body:eq(0)").show();
$("#secondpane p.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
}); 
});

$(this) 对选定对象使用，应该是用到一级菜单项上；
.next("div.menu_body") 选定对象下面紧挨着的子菜单div；
.slideToggle(300) 如果是打开就关闭，如果是关闭就打开，300毫秒的滑动效果；
.siblings("div.menu_body") 然后选定其他子菜单；
.slideUp("slow"); 关闭其他子菜单；

总结起来就是打开当前选定项目的子菜单，关闭其他子菜单