超级简单实现竖向折叠二级菜单

用jQuery的几个方法快速实现竖向折叠二级菜单,点击一级菜单出现二级菜单，带动画效果

注意点：不要给一级菜单的li设定宽度，因为点击后li会自然撑大

  <script>
        window.onload=function(){
            $('.nav li').click(function(){
                $(this).children('.sub').slideToggle() //带动画平滑向下显示/隐藏二级菜单
                $(this).children('span').toggleClass('arrow') //span的的背景为箭头
            })
        }
    </script>

       .sub{
              background-color: yellowgreen;
              display: none;
              
          }
          .sub>li{
              border-bottom: 1px solid white;
          }
          .sub>li:hover{
              background-color: yellow;
          }
          .arrow{
              rotate: -90deg;
              transition: 1s;
          }