效果图：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery后台左侧伸缩菜单代码 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</head>
<body>
<div class="nav">
<div class="nav-top">
<div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png" ></div>
</div>
<ul id="aat">
</ul>
</div>
<div style="text-align:center;margin:-650px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
<script>
$(function(){
var navList = [
{
"p" : "银川市",
"c" : ["兴庆区","金凤区","西夏区","中宁县","灵武市","贺兰县"]
},
{
"p" : "石嘴山市",
"c" : ["大武口区","惠农区","平罗县"]
},
{
"p" : "吴忠市",
"c" : ["利通区","红寺堡区","盐池县","同心县","青铜峡市"]
},
{
"p" : "中卫市",
"c" : ["沙坡头区","中宁县","海原县"]
},
{
"p" : "固原市",
"c" : ["原州区","泾源县","西吉县","隆德县","彭阳县"]
}
]
var navData = '';
for(let i=0;i<navList.length;i++){
navData+= "<li class='nav-item'><a href='javascript:;'><i class='my-icon nav-icon icon_1'></i><span>"+navList[i].p+"</span><i class='my-icon nav-more'></i></a><ul>"
for(let w=0;w<navList[i].c.length;w++){
navData+="<li><a href='javascript:;'><span>"+navList[i].c[w]+"</span></a></li>"
}
navData+="</ul></li>"
}
console.log(navData)
$('#aat').html(navData)
})
</script>
</body>
</html>
JS： 基于jq，需要先引入JQ；
$(function(){
// nav收缩展开
$('#aat').on('click','.nav-item>a',function(){
if (!$('.nav').hasClass('nav-mini')) {
if ($(this).next().css('display') == "none") {
//展开未展开
$('.nav-item').children('ul').slideUp(300);
$(this).next('ul').slideDown(300);
$(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
}else{
//收缩已展开
$(this).next('ul').slideUp(300);
$('.nav-item.nav-show').removeClass('nav-show');
}
}
});
// 标志点击样式
$('#aat').on('click','.nav-item>ul>li',function(){
$('.nav-item>ul>li').css('background','none')
$(this).css('background','yellow')
// $(this).siblings().css('background','none')
})
//nav-mini切换
$('#mini').on('click',function(){
if (!$('.nav').hasClass('nav-mini')) {
$('.nav-item.nav-show').removeClass('nav-show');
$('.nav-item').children('ul').removeAttr('style');
$('.nav').addClass('nav-mini');
}else{
$('.nav').removeClass('nav-mini');
}
});
});
CSS：
@charset "utf-8";
/* 以下实际使用若已初始化可删除 .nav height父级需逐级设置为100%*/
body,html{height: 100%;background: #E2E2E2}
body,ul{margin:0;padding:0}
body{font:14px "微软雅黑","宋体","Arial Narrow",HELVETICA;-webkit-text-size-adjust:100%;}
li{list-style:none}
a{text-decoration:none;}
/* 以上实际使用若已初始化可删除 */
/* nav */
.nav{width: 220px;height: 100%;background: #263238;transition: all .3s;}
.nav a{display: block;overflow: hidden;padding-left: 20px;line-height: 46px;max-height: 46px;color: #ABB1B7;transition: all .3s;}
.nav a span{margin-left: 30px;}
.nav-item{position: relative;}
.nav-item.nav-show{border-bottom: none;}
.nav-item ul{display: none;background: rgba(0,0,0,.1);}
.nav-item.nav-show ul{display: block;}
.nav-item>a:before{content: "";position: absolute;left: 0px;width: 2px;height: 46px;background: #34A0CE;opacity:0;transition: all .3s;}
.nav .nav-icon{font-size: 20px;position: absolute;margin-left:-1px;}
/* 此处修改导航图标 可自定义iconfont 替换*/
.icon_1::after{content: "\e62b";}
.icon_2::after{content: "\e669";}
.icon_3::after{content: "\e61d";}
/*---------------------*/
.nav-more{float:right;margin-right: 20px;font-size: 12px;transition: transform .3s;}
/* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
.nav-more::after{content: "\e621";}
/*---------------------*/
.nav-show .nav-more{transform:rotate(90deg);}
.nav-show,.nav-item>a:hover{color: #FFF;background:rgba(0,0,0,.1);}
.nav-show>a:before,.nav-item>a:hover:before{opacity:1;}
.nav-item li:hover a{color: #FFF;background: rgba(0, 0, 0,.1);}
/* nav-mini */
.nav-mini.nav{width: 60px;}
.nav-mini.nav .nav-icon{/* margin-left:-2px; */}
.nav-mini.nav .nav-item>a span{display: none;}
.nav-mini.nav .nav-more{margin-right: -20px;}
.nav-mini.nav .nav-item ul{position: absolute;top:0px;left:60px;width: 180px;z-index: 99;background:#3C474C;overflow: hidden;}
.nav-mini.nav .nav-item:hover{background:rgba(255,255,255,.1);}
.nav-mini.nav .nav-item:hover .nav-item a{color:#FFF;}
.nav-mini.nav .nav-item:hover a:before{opacity:1;}
.nav-mini.nav .nav-item:hover ul{display: block;}
基于站长之家提供模版改进后的样式。一级二级标题可以动态添加，二级类只能选择一个。