实现思路
本垂直折叠导航栏主要通过css实现简单的菜单样式布局，将第二菜单通过display：none；隐藏起来，再通过jQuery给第第二菜单ul标签设置slideToggle()方法，来达到第二菜单的拉伸收缩。
实现效果
实现代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery折叠导航栏</title><style type="text/css">*{margin: 0;padding: 0;}body{font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;}a{color: #b63b4d;text-decoration: none;font-family:"微软雅黑";}.nav{list-style: none;width: 200px;margin: 100px 20px;/*改变菜单到页面的位置*/}.nav>li{position: relative;border: 1px solid #000;line-height: 35px;border-bottom: none;}.nav>li:last-child{border-bottom: 1px solid #000;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}.nav>li:first-child{border-top-left-radius:10px;border-top-right-radius:10px;}.nav>li>a{margin-left:5px;color: #000;font-weight: bold;}.nav>li>span{font-size:20px;float: right;position: absolute;right: 50px;}.nav>li>ul{list-style: none;background-color:skyblue;border-bottom: 1px solid #fff;display: none;}.nav>li>ul>li{border-bottom: 1px solid white;}.nav>li>ul>li:hover{background-color: red;cursor: pointer;}.nav>li>ul>li>a{color:white;box-sizing: border-box;margin-left: 20px;}.deg{transform: rotate(90deg);}</style><!-- 引入jQuery库 --><script src="jquery.js" type="text/javascript" charset="utf-8"></script><!-- 如果没有下载jQuery库可以用网上的jQuery库 --><!-- <script src="/jquery/1.10.2/jquery.min.js"></script> --><!-- jQuery实现代码--><script type="text/javascript">$(function(){//给第一菜单设置点击事件$(".nav>li").click(function(){//获取第二菜单var sub= $(this).children("ul");//将第二菜单设置上下滑动动画sub.slideToggle(500);//给>箭头添加类转90度，向下$(this).children("span").toggleClass("deg");//点击一个菜单的时候，把它的兄弟元素的第一菜单收起来$(this).siblings().children("ul").slideUp(500);//箭头移除90度旋转的的类$(this).siblings().children("span").removeClass("deg");});});</script> </head><body><ul class="nav"><li><a href="#">风景</a><span>></span><ul><li><a href="#">天空</a></li><li><a href="#">大树</a></li><li><a href="#">星星</a></li><li><a href="#">月亮</a></li><li><a href="#">太阳</a></li></ul></li><li><a href="#">美食</a><span>></span><ul><li><a href="#">辣子鸡</a></li><li><a href="#">螺蛳粉</a></li><li><a href="#">老友粉</a></li><li><a href="#">炸鸡</a></li><li><a href="#">波波茶</a></li></ul></li><li><a href="#">乐趣</a><span>></span><ul><li><a href="#">想你</a></li><li><a href="#">一起</a></li><li><a href="#">看看</a></li><li><a href="#">美丽</a></li><li><a href="#">星空</a></li></ul></li><li><a href="#">心愿</a><span>></span><ul><li><a href="#">想你</a></li><li><a href="#">在一起</a></li><li><a href="#">吃饭</a></li><li><a href="#">框架</a></li><li><a href="#">做梦</a></li></ul></li><li><a href="#">我们</a><span>></span><ul><li><a href="#">没有</a></li><li><a href="#">我们</a></li><li><a href="#">只有</a></li><li><a href="#">后来</a></li><li><a href="#">的我们</a></li></ul></li><li><a href="#">未来</a><span>></span><ul><li><a href="#">想你</a></li><li><a href="#">和你</a></li><li><a href="#">一起</a></li><li><a href="#">吃饭</a></li><li><a href="#">看电影</a></li></ul></li></ul></body></html>
