实现思路
本垂直折叠导航栏主要通过css实现简单的菜单样式布局，将第二菜单通过display：none；隐藏起来，再通过jQuery给第第二菜单ul标签设置slideToggle()方法，来达到第二菜单的拉伸收缩。
实现效果
实现代码
html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery折叠导航栏</title>
<style type="text/css">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>
