abstrak：html代碼<div class="nav">    <div class="parent">        <div class="one"><strong>個(gè)

html代碼

<div class="nav">
   <div class="parent">
       <div class="one"><strong>個(gè)人中心</strong></div>
       <div class="two">
           <div><a href="">個(gè)人信息</a></div>
           <div><a href="">系統(tǒng)通知</a></div>
           <div><a href="">短消息</a></div>
       </div>
   </div>
   <div class="parent">
       <div class="one"><strong>課程中心</strong></div>
       <div class="two">
           <div><a href="">個(gè)人信息</a></div>
           <div><a href="">系統(tǒng)通知</a></div>
           <div><a href="">短消息</a></div>
       </div>
   </div>
   <div class="parent">
       <div class="one"><strong>校內(nèi)討論</strong></div>
       <div class="two">
           <div><a href="">個(gè)人信息</a></div>
           <div><a href="">系統(tǒng)通知</a></div>
           <div><a href="">短消息</a></div>
       </div>
   </div>
   <div class="parent">
       <div class="one"><strong>資源中心</strong></div>
       <div class="two">
           <div><a href="">個(gè)人信息</a></div>
           <div><a href="">系統(tǒng)通知</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>

效果圖

Guru membetulkan：韋小寶Masa pembetulan：2018-12-11 09:13:26
Rumusan guru：不錯(cuò)！寫的很棒！往后去這種效果還可以改成無限分類的樣式！課后沒事可以嘗試一下！