核心提示：完整代码：https://github.com/erdouzhang/menu 在线演示：https://erdouzhang.github.io/menu/step1.页面引入相关文件 link r...
完整代码：https://github.com/erdouzhang/menu
在线演示：https://erdouzhang.github.io/menu/
step1.页面引入相关文件
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="css/main.css"> <script src="lib/jquery/jquery.js"></script> <script src="js/main.js"></script>
step2.写html、css、js
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单--垂直收缩</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<p>
<p class="VerticalMenu">
<p>
<p><span>菜单一</span><i class="glyphicon glyphicon-chevron-right"></i></p>
<p name="menu">
<p>
<p><span>选项一</span></p>
</p>
<p>
<p><span>选项一</span></p>
</p>
<p>
<p><span>选项一</span></p>
</p>
</p>
</p>
<p>
<p><span>菜单二</span><i class="glyphicon glyphicon-chevron-right"></i></p>
<p name="menu">
<p>
<p><span>选项二</span></p>
</p>
<p>
<p><span>选项二</span></p>
</p>
<p>
<p><span>选项二</span></p>
</p>
</p>
</p>
<p>
<p><span>菜单三</span><i class="glyphicon glyphicon-chevron-right"></i></p>
<p name="menu">
<p>
<p><span>选项三</span></p>
</p>
<p>
<p><span>选项三</span></p>
</p>
<p>
<p><span>选项三</span></p>
</p>
</p>
</p>
<p>
<p><span>菜单四</span><i class="glyphicon glyphicon-chevron-right"></i></p>
<p name="menu">
<p>
<p><span>选项四</span></p>
</p>
<p>
<p><span>选项四</span></p>
</p>
<p>
<p><span>选项四</span></p>
</p>
</p>
</p>
<p>
<p><span>菜单五</span><i class="glyphicon glyphicon-chevron-right"></i></p>
<p name="menu">
<p>
<p><span>选项五</span></p>
</p>
<p>
<p><span>选项五</span></p>
</p>
<p>
<p><span>选项五</span></p>
</p>
</p>
</p>
</p>
</p>
<script src="lib/jquery/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
css代码:
.VerticalMenu{
height:100%;
width:200px;
cursor:pointer;
&>p{
width:200px;
float:left;
&>p:first-child{
text-align:center;
height:40px;
background-color:white;
line-height:40px;
padding-right:10px;
border-bottom: 1px solid #cdb0b0;
transition:background-color 0.4s linear;
&:hover{
background-color:#33B9FF;
}
&>i:last-child{
line-height:40px;
float:right;
transform:rotate(0deg);
transition:transform 0.4s linear;
}
}
&>p:last-child{
width:200px;
display:none;
&>p{
background-color:white;
transition:background-color 0.1s linear;
text-align:center;
line-height:40px;
border-bottom:1px solid #e6e6e6;
&:hover{
background-color:#33B9FF!important;
}
}
}
}
&>p:first-child{
&>p:first-child{
border-top-left-radius:5px;
border-top-right-radius:5px;
}
}
&>p:last-child{
&>p:first-child{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
&::after{
display:block;
clear:both;
}
}
}
js代码:
$(function(){
$(".VerticalMenu>p>p:first-child").click(function () {
$menu = $(".VerticalMenu>p>p:first-child");
// 右侧小箭头动画
$($menu).not(this).children("i.glyphicon-chevron-right").css({ "transform": "rotate(0deg)", "color": "#000000" }).attr("leng", "")
if ($(this).children("i.glyphicon-chevron-right").attr("leng") != "s") {
$(this).children("i.glyphicon-chevron-right").attr("leng", "s")
$(this).children("i.glyphicon-chevron-right").css({ "transform": "rotate(90deg)", "color": "#f9579e" })
} else {
$(this).children("i.glyphicon-chevron-right").attr("leng", "")
$(this).children("i.glyphicon-chevron-right").css({ "transform": "rotate(0deg)", "color": "#000000" })
}
// 点击后子菜单展开其他菜单折叠
$($menu).not($(this)).siblings("[name='menu']").stop().slideUp(400)
$(this).siblings("[name='menu']").slideToggle(400)
})
// 菜单点击后背景颜色变化
$VerticalMenu_scdj = null;
$(".VerticalMenu>p>p:last-child>p").click(function () {
$($VerticalMenu_scdj).css("background-color", "white");
$(this).css("background-color","#33B9FF");
$VerticalMenu_scdj=$(this)
})
})
step3.效果
