jquery側邊折疊導航欄制作，兩行代碼搞定

//CSS
*{margin: 0;padding: 0}
ul{list-style: none}
.menu li ul{display: none}

 

  　 //HTML代碼
 　　<ul class="menu">
        <li>首頁</li>
        <li class="submenu">音樂
            <ul>
                <li><a href="">流行音樂</a></li>
                <li><a href="">民謠</a></li>
                <li><a href="">古典</a></li>
            </ul>
        </li>
        <li class="submenu">視頻
            <ul>
                <li><a href="">美劇</a></li>
                <li><a href="">韓劇</a></li>
                <li><a href="">日劇</a></li>
            </ul>
        </li>
    </ul>

//JQUERY
(function($){
    'use strict';
   $('.submenu').on('click',function(){
       $(this).siblings().find('ul').slideUp();
       $(this).find('ul').slideToggle();
   });
})(jQuery);

jqury就兩個行代碼，搞定一個折疊式導航欄！