jquery完成手风琴效果

html代码

<div class="nav">
   <div class="parent">
       <div class="one"><strong>个人中心</strong></div>
       <div class="two">
           <div><a href="">个人信息</a></div>
           <div><a href="">系统通知</a></div>
           <div><a href="">短消息</a></div>
       </div>
   </div>
   <div class="parent">
       <div class="one"><strong>课程中心</strong></div>
       <div class="two">
           <div><a href="">个人信息</a></div>
           <div><a href="">系统通知</a></div>
           <div><a href="">短消息</a></div>
       </div>
   </div>
   <div class="parent">
       <div class="one"><strong>校内讨论</strong></div>
       <div class="two">
           <div><a href="">个人信息</a></div>
           <div><a href="">系统通知</a></div>
           <div><a href="">短消息</a></div>
       </div>
   </div>
   <div class="parent">
       <div class="one"><strong>资源中心</strong></div>
       <div class="two">
           <div><a href="">个人信息</a></div>
           <div><a href="">系统通知</a></div>
           <div><a href="">短消息</a></div>
       </div>
   </div>
</div>

css代码

<style type="text/css">
   *{margin:0;padding:0;font-size:14px;font-family: "微软雅黑";}
   a{text-decoration: none;}
   .nav{width: 250px;margin:20px auto;border-top:4px solid lightseagreen;border-bottom: 3px solid lightseagreen;}
   .one{height:40px;line-height: 40px;text-align: center;border-left:1px solid lightseagreen;border-right:1px solid lightseagreen;border-bottom: 1px solid lightseagreen;}
   .two{border-left:1px solid lightseagreen;border-right:1px solid lightseagreen;}
   .two div{height:35px;line-height:35px;text-align: center;border-bottom:1px dotted lightseagreen;}
   .two div a{color: lightseagreen;}
</style>

js代码

<script type="text/javascript">
   $(function(){
       $('.two').css('display','none');
       var one = $('.one');
       var two = $('.two');
       one.each(function(i){
           $(this).click(function(){

               if($(two[i]).css('display')=='none'){//如果是隐藏的，就让它显示
                   two.slideUp(400);//显示之前，让所有的先隐藏
                   $(two[i]).slideDown(400);
               }else{
                   $(two[i]).slideUp(400);
               }
           })
       })
   })
</script>

效果图