实现思路

本垂直折叠导航栏主要通过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="https://cdn.staticfile.org/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>