当前位置：移动技术网 > IT编程>开发语言>Jquery > 后台管理系统常用侧导航，可折叠，三级导航

后台管理系统常用侧导航，可折叠，三级导航

2020年05月08日 | 移动技术网IT编程 | 我要评论

效果图

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>

<div class="top" style="width: 100%;height: 80px;background-color: #397bc5"></div>
<div class="left-side-menu">
<div class="lsm-expand-btn">
<div class="lsm-mini-btn">
<label>
<input type="checkbox" checked="checked">
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" />
<path class="line--1" d="m0 40h62c18 0 18-20-17 5l31 55" />
<path class="line--2" d="m0 50h80" />
<path class="line--3" d="m0 60h62c18 0 18 20-17-5l31 45" />
</svg>
</label>
</div>

</div>
    <div class="lsm-container">
        <div class="lsm-scroll">
            <div class="lsm-sidebar">
                <ul>
                    <!-- 一级导航 -->
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_1"></i><span>系统设置</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <!--二级导航 -->
                            <li><a href="javascript:;"><span>地爆天星</span></a></li>
                            <li><a class="active" href="javascript:;"><span>无线月读</span></a></li>
                            <li><a href="javascript:;"><span>一乐拉面</span></a></li>
                            <li class="lsm-sidebar-item">
                                <!-- 三级导航 -->
                                <a href="javascript:;"><i class="my-icon lsm-sidebar-icon "></i><span>二级菜单11</span><i class="my-icon lsm-sidebar-more"></i></a>
                                <ul>
                                    <li><a href="javascript:;"><span>地爆天星</span></a></li>
                                    <li><a href="javascript:;"><span>无线月读</span></a></li>
                                    <li><a href="javascript:;"><span>一乐拉面</span></a></li>
                                    <li><a href="javascript:;"><span>血继限界</span></a></li>
                                    <li><a href="javascript:;"><span>秽土转生</span></a></li>
                                    <li><a href="javascript:;"><span>万象天引</span></a></li>
                                    <li><a href="javascript:;"><span>尸鬼封尽</span></a></li>
                                    <li><a href="javascript:;"><span>飞雷神之术</span></a></li>
                                    <li><a href="javascript:;"><span>多重影分身术</span></a></li>
                                    <li><a href="javascript:;"><span>飞雷神之术</span></a></li>
                                    <li><a href="javascript:;"><span>须佐之男</span></a></li>
                                    <li><a href="javascript:;"><span>外道魔像</span></a></li>
                                    <li><a href="javascript:;"><span>双蛇相杀</span></a></li>
                                </ul>
                            </li>
                            <li class="lsm-sidebar-item">
                                <a href="javascript:;"><i class="my-icon lsm-sidebar-icon "></i><span>二级菜单22</span><i class="my-icon lsm-sidebar-more"></i></a>
                                <ul>
                                    <li><a href="javascript:;"><span>血继限界</span></a></li>
                                    <li><a href="javascript:;"><span>秽土转生</span></a></li>
                                    <li><a href="javascript:;"><span>万象天引</span></a></li>
                                    <li><a href="javascript:;"><span>尸鬼封尽</span></a></li>
                                    <li><a href="javascript:;"><span>飞雷神之术</span></a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_2"></i><span>网络设置</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>地爆天星1</span></a></li>
                            <li><a href="javascript:;"><span>神罗天征1</span></a></li>
                            <li><a href="javascript:;"><span>八门遁甲1</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>退出系统</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国2</span></a></li>
                            <li><a href="javascript:;"><span>沙之国3</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者3</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-iconset0308"></i><span>购物车管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国4</span></a></li>
                            <li><a href="javascript:;"><span>沙之国4</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者4</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi1"></i><span>支付中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国5</span></a></li>
                            <li><a href="javascript:;"><span>沙之国5</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者5</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi"></i><span>充值中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国6</span></a></li>
                            <li><a href="javascript:;"><span>沙之国6</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者6</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-users"></i><span>用户管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国8</span></a></li>
                            <li><a href="javascript:;"><span>沙之国8</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者8</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国9</span></a></li>
                            <li><a href="javascript:;"><span>沙之国9</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者9</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>退出系统</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国2</span></a></li>
                            <li><a href="javascript:;"><span>沙之国3</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者3</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-iconset0308"></i><span>购物车管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国4</span></a></li>
                            <li><a href="javascript:;"><span>沙之国4</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者4</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi1"></i><span>支付中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国5</span></a></li>
                            <li><a href="javascript:;"><span>沙之国5</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者5</span></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

style.css

@charset "utf-8";
  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
}
.left-side-menu,.lsm-popup.lsm-sidebar ul li,.lsm-container.lsm-mini .lsm-sidebar>ul>li.lsm-sidebar-item>ul>li.lsm-sidebar-item>ul {
  background:#3b3e47
}
.left-side-menu {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.left-side-menu {
  height:calc(100% - 80px);
  width:220px
}
.lsm-expand-btn {
  height:65px
}
.lsm-container {
  height:calc(100% - 65px);
  transition:all .3s;
  z-index:100
}
.lsm-container li>a.active {
  background:#c55b03;
  color:#fff
}
.lsm-sidebar a {
  display:block;
  overflow:hidden;
  padding-left:20px;
  line-height:40px;
  max-height:40px;
  color:#b2b8be;
  transition:all .3s
}
.lsm-container ul:first-child>li>a,.lsm-container ul:first-child>li>a span {
  line-height:55px;
  max-height:55px
}
.lsm-sidebar a span {
  margin-left:30px
}
.lsm-sidebar .lsm-sidebar-item .lsm-sidebar-item>ul>li a span {
  margin-left:60px
}
.lsm-sidebar-item {
  position:relative
}
.lsm-sidebar-item.lsm-sidebar-show {
  border-bottom:none
}
.lsm-sidebar-item ul {
  display:none;
  background:rgba(0,0,0,.1)
}
.lsm-sidebar-item.lsm-sidebar-show ul {
  display:block
}
.lsm-sidebar-item>a:before {
  content:"";
  position:absolute;
  left:0;
  width:2px;
  height:40px;
  background:#34a0ce;
  opacity:0;
  transition:all .3s
}
.lsm-container ul:first-child>li.lsm-sidebar-item>a:before {
  height:55px
}
.lsm-sidebar .lsm-sidebar-icon {
  font-size:20px;
  position:absolute;
  margin-left:-1px
}
.icon_1::after {
  content:"\e62b"
}
.icon_2::after {
  content:"\e669"
}
.icon_3::after {
  content:"\e61d"
}
.icon_3::after {
  content:"\e698"
}
.lsm-sidebar-more {
  float:right;
  margin-right:20px;
  font-size:12px;
  transition:transform .3s
}
.lsm-sidebar-more::after {
  content:"\e621"
}
.lsm-sidebar-show>a>i.my-icon.lsm-sidebar-more {
  transform:rotate(90deg)
}
.lsm-sidebar-show,.lsm-sidebar-item>a:hover {
  color:#fff;
  background:rgba(0,0,0,.2)
}
.lsm-sidebar-show>a:before,.lsm-sidebar-item>a:hover:before {
  opacity:1
}
.lsm-sidebar-item li>a:hover,.lsm-popup>div>ul>li>a:hover {
  color:#fff;
  background:#6e809c
}
.lsm-mini-btn {
  height:70px;
  width:70px
}
.lsm-mini-btn svg {
  margin:-10px 0 0 -10px
}
.lsm-mini-btn input[type=checkbox] {
  display:none
}
.lsm-mini-btn path {
  fill:none;
  stroke:#fff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  --length:24;
  --offset:-38;
  stroke-dasharray:var(--length) var(--total-length);
  stroke-dashoffset:var(--offset);
  transition:all .8s cubic-bezier(.645,.045,.355,1)
}
.lsm-mini-btn circle {
  fill:#fff3;
  opacity:0
}
.lsm-mini-btn label {
  top:0;
  right:0
}
.lsm-mini-btn label:hover circle {
  opacity:1
}
.lsm-mini-btn input:checked+svg .line--1,.lsm-mini-btn input:checked+svg .line--3 {
  --length:8.602325267
}
.lsm-mini-btn .line--1,.lsm-mini-btn .line--3 {
  --total-length:126.38166809082031
}
.lsm-mini-btn .line--2 {
  --total-length:80
}
.lsm-mini-btn input:checked+svg .line--1,.lsm-mini-btn input:checked+svg .line--3 {
  --offset:-109.1770175568
}
.lsm-mini .lsm-container,.lsm-mini .lsm-container {
  width:60px
}
.lsm-container.lsm-mini .lsm-sidebar .lsm-sidebar-icon {
  }.left-side-menu.lsm-mini ul:first-child>li.lsm-sidebar-item>a span {
  display:none
}
.left-side-menu.lsm-mini ul:first-child>li.lsm-sidebar-item>a>i.lsm-sidebar-more {
  margin-right:-20px
}
.lsm-container.lsm-mini .lsm-sidebar>ul>li.lsm-sidebar-item>ul>li.lsm-sidebar-item>ul {
  display:none;
  position:absolute;
  top:0;
  left:180px;
  width:180px;
  z-index:99;
  bottom:0;
  top:0;
  overflow:hidden
}
.left-side-menu.lsm-mini ul:first-child>li>ul {
  display:none
}
.transform {
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1)
}
.lsm-popup div {
  background:#05161f
}
.lsm-popup {
  display:block;
  position:absolute;
  border:3px solid transparent
}
.lsm-popup>div>a>i.my-icon.lsm-sidebar-more {
  transform:rotate(90deg)
}
.lsm-popup.second {
  left:60px
}
.lsm-popup.third {
  left:243px
}
.lsm-popup.third.lsm-sidebar>div>ul {
  display:block
}
.lsm-popup div {
  border-radius:5px
}
.lsm-popup .lsm-sidebar-icon {
  display:none
}
.lsm-popup.lsm-sidebar a span {
  margin-left:0
}
.lsm-popup.lsm-sidebar>div>ul>li.lsm-sidebar-item>ul {
  position:absolute;
  top:0;
  left:180px;
  width:180px;
  z-index:99
}
.lsm-popup.lsm-sidebar ul {
  width:180px
}
.lsm-popup.lsm-sidebar ul li {
  width:180px
}
.lsm-popup.lsm-sidebar ul li:last-child,.lsm-popup>div>ul>li:last-child>a {
  border-radius:0 0 5px 5px
}

iconfont.css

@font-face {
    font-family:"my-icon";
    src:url(../font/iconfont.eot?t=1507649649871);
    src:url(../font/iconfont.eot?t=1507649649871#iefix) format('embedded-opentype'),
        url(../font/iconfont.woff?t=1507649649871) format('woff'),
        url(../font/iconfont.ttf?t=1507649649871) format('truetype'),
        url(../font/iconfont.svg?t=1507649649871#my-icon) format('svg');
}
.my-icon {
    font-family:"my-icon"!important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.icon-touxiang:before {
    content:"\e62c"
}
.icon-crmtubiaohuaban35fuben3773:before {
    content:"\e85f"
}
.icon-shengyuliuliang:before {
    content:"\e650"
}
.icon-user:before {
    content:"\e61a"
}
.icon-mianfeishiyong:before {
    content:"\e618"
}
.icon-tuichu:before {
    content:"\e60b"
}
.icon-iconset0253:before {
    content:"\e698"
}
.icon-iconset0308:before {
    content:"\e6cf"
}
.icon-chongzhi:before {
    content:"\e600"
}
.icon-chongzhi1:before {
    content:"\e676"
}
.icon-dunpai:before {
    content:"\e620"
}
.icon-chongzhi-copy:before {
    content:"\e78e"
}
.icon-chongzhi4:before {
    content:"\e6b4"
}
.icon-shezhichilun:before {
    content:"\e62b"
}
.icon-chongzhi2:before {
    content:"\e6c7"
}
.icon-caidanlanaipinpai:before {
    content:"\e68f"
}
.icon-chongzhi5:before {
    content:"\e67a"
}
.icon-alarm:before {
    content:"\e604"
}
.icon-power:before {
    content:"\e65c"
}
.icon-users:before {
    content:"\e685"
}
.icon-worldwide:before {
    content:"\e690"
}
.icon-5daqu:before {
    content:"\e669"
}
.icon-touxiang1:before {
    content:"\e60e"
}
.icon-yonghu:before {
    content:"\e616"
}
.icon-daochuexcelbiaoge:before {
    content:"\e61d"
}
.icon-chilun:before {
    content:"\e611"
}
.icon-qunzu:before {
    content:"\e696"
}
.icon-shousuodaohangicon:before {
    content:"\e6bc"
}
.icon-jiantou:before {
    content:"\e612"
}
.icon-jiantouxiangyou:before {
    content:"\e621"
}
.icon-jiantouxiangshang:before {
    content:"\e622"
}
.icon-jiantouxiangzuo:before {
    content:"\e623"
}

jquery.slimscroll.min.js

/*! copyright (c) 2011 piotr rochala (http://rocha.la)
 * dual licensed under the mit (http://www.opensource.org/licenses/mit-license.php)
 * and gpl (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * version: 1.3.8
 *
 */
(function(e){e.fn.extend({slimscroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysvisible:!1,disablefadeout:!1,railvisible:!1,railcolor:"#333",railopacity:.2,raildraggable:!0,railclass:"slimscrollrail",barclass:"slimscrollbar",wrapperclass:"slimscrolldiv",allowpagescroll:!1,wheelstep:20,touchscrollstep:200,borderradius:"7px",railborderradius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
var c=0;d.wheeldelta&&(c=-d.wheeldelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srctarget||d.srcelement).closest("."+a.wrapperclass).is(b.parent())&&n(c,!0);d.preventdefault&&!k&&d.preventdefault();k||(d.returnvalue=!1)}}function n(d,g,e){k=!1;var f=b.outerheight()-c.outerheight();g&&(g=parseint(c.css("top"))+d*parseint(a.wheelstep)/100*c.outerheight(),g=math.min(math.max(g,0),f),g=0<d?math.ceil(g):math.floor(g),c.css({top:g+"px"}));l=parseint(c.css("top"))/(b.outerheight()-c.outerheight());g=
l*(b[0].scrollheight-b.outerheight());e&&(g=d,d=g/b[0].scrollheight*b.outerheight(),d=math.min(math.max(d,0),f),c.css({top:d+"px"}));b.scrolltop(g);b.trigger("slimscrolling",~~g);w();p()}function x(){u=math.max(b.outerheight()/b[0].scrollheight*b.outerheight(),30);c.css({height:u+"px"});var a=u==b.outerheight()?"none":"block";c.css({display:a})}function w(){x();cleartimeout(b);l==~~l?(k=a.allowpagescroll,c!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;c=l;u>=b.outerheight()?k=!0:(c.stop(!0,
!0).fadein("fast"),a.railvisible&&m.stop(!0,!0).fadein("fast"))}function p(){a.alwaysvisible||(b=settimeout(function(){a.disablefadeout&&r||y||z||(c.fadeout("slow"),m.fadeout("slow"))},1e3))}var r,y,z,b,a,u,l,c,k=!1,b=e(this);if(b.parent().hasclass(a.wrapperclass)){var q=b.scrolltop(),c=b.siblings("."+a.barclass),m=b.siblings("."+a.railclass);x();if(e.isplainobject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollto"in f)q=parseint(a.scrollto);else if("scrollby"in f)q+=parseint(a.scrollby);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isplainobject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("<div></div>").addclass(a.wrapperclass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
width:a.width,height:a.height});var m=e("<div></div>").addclass(a.railclass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysvisible&&a.railvisible?"block":"none","border-radius":a.railborderradius,background:a.railcolor,opacity:a.railopacity,zindex:90}),c=e("<div></div>").addclass(a.barclass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysvisible?"block":"none","border-radius":a.borderradius,borderradius:a.borderradius,mozborderradius:a.borderradius,
webkitborderradius:a.borderradius,zindex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.raildraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parsefloat(c.css("top"));pagey=a.pagey;b.bind("mousemove.slimscroll",function(a){currtop=t+a.pagey-pagey;c.css("top",currtop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
function(a){a.stoppropagation();a.preventdefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalevent.touches.length&&(a=a.originalevent.touches[0].pagey)});b.bind("touchmove",function(b){k||b.originalevent.preventdefault();b.originalevent.touches.length&&(n((a-b.originalevent.touches[0].pagey)/a.touchscrollstep,!0),a=b.originalevent.touches[0].pagey)});
x();"bottom"===a.start?(c.css({top:b.outerheight()-c.outerheight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysvisible||c.hide());window.addeventlistener?(this.addeventlistener("dommousescroll",v,!1),this.addeventlistener("mousewheel",v,!1)):document.attachevent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimscroll})})(jquery);

script.js

$(function() {
    $('.lsm-scroll').slimscroll({
        height: 'auto',
        position: 'right',
        railopacity: 1,
        size: "5px",
        opacity: .4,
        color: '#fffafa',
        wheelstep: 5,
        touchscrollstep: 50
    });
    $('.lsm-container ul ul').css("display", "none");
    $('.lsm-sidebar a').on('click',
    function() {
        $('.lsm-scroll').slimscroll({
            height: 'auto',
            position: 'right',
            size: "8px",
            color: '#9ea5ab',
            wheelstep: 5,
            touchscrollstep: 50
        });
        if (!$('.left-side-menu').hasclass('lsm-mini')) {
            $(this).parent("li").siblings("li.lsm-sidebar-item").children('ul').slideup(200);
            if ($(this).next().css('display') == "none") {
                $(this).next('ul').slidedown(200);
                $(this).parent('li').addclass('lsm-sidebar-show').siblings('li').removeclass('lsm-sidebar-show');
            } else {
                $(this).next('ul').slideup(200);
                $(this).parent('li').removeclass('lsm-sidebar-show');
            }
        }
    });
    $('.lsm-mini-btn svg').on('click',
    function() {
        if ($('.lsm-mini-btn input[type="checkbox"]').prop("checked")) {
            $('.lsm-sidebar-item.lsm-sidebar-show').removeclass('lsm-sidebar-show');
            $('.lsm-container ul').removeattr('style');
            $('.left-side-menu').addclass('lsm-mini');
            $('.left-side-menu').stop().animate({
                width: 60
            },
            200);
        } else {
            $('.left-side-menu').removeclass('lsm-mini');
            $('.lsm-container ul ul').css("display", "none");
            $('.left-side-menu').stop().animate({
                width: 240
            },
            200);
        }
    });
    $(document).on('mouseover', '.lsm-mini .lsm-container ul:first>li',
    function() {
        $(".lsm-popup.third").hide();
        $(".lsm-popup.second").length == 0 && ($(".lsm-container").append("<div class='second lsm-popup lsm-sidebar'><div></div></div>"));
        $(".lsm-popup.second>div").html($(this).html());
        $(".lsm-popup.second").show();
        $(".lsm-popup.third").hide();
        var top = $(this).offset().top;
        var d = $(window).height() - $(".lsm-popup.second>div").height();
        if (d - top <= 0) {
            top = d >= 0 ? d - 8 : 0;
        }
        $(".lsm-popup.second").stop().animate({
            "top": top
        },
        100);
    });
    $(document).on('mouseover', '.second.lsm-popup.lsm-sidebar > div > ul > li',
    function() {
        if (!$(this).hasclass("lsm-sidebar-item")) {
            $(".lsm-popup.third").hide();
            return;
        }
        $(".lsm-popup.third").length == 0 && ($(".lsm-container").append("<div class='third lsm-popup lsm-sidebar'><div></div></div>"));
        $(".lsm-popup.third>div").html($(this).html());
        $(".lsm-popup.third").show();
        var top = $(this).offset().top;
        var d = $(window).height() - $(".lsm-popup.third").height();
        if (d - top <= 0) {
            top = d >= 0 ? d - 8 : 0;
        }
        $(".lsm-popup.third").stop().animate({
            "top": top
        },
        100);
    });
    $(document).on('mouseleave', '.lsm-mini .lsm-container ul:first, .lsm-mini .slimscrollbar,.second.lsm-popup ,.third.lsm-popup',
    function() {
        $(".lsm-popup.second").hide();
        $(".lsm-popup.third").hide();
    });
    $(document).on('mouseover', '.lsm-mini .slimscrollbar,.second.lsm-popup',
    function() {
        $(".lsm-popup.second").show();
    });
    $(document).on('mouseover', '.third.lsm-popup',
    function() {
        $(".lsm-popup.second").show();
        $(".lsm-popup.third").show();
    });
});

icontfont相关文件