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就两个行代码，搞定一个折叠式导航栏！