console 命令行工具 X clear

console

$(function(){
    
    $('.nav-item>a').on('click',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');
            }
        }
    });
  
    $('#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');
        }
    });
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="font/nav.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/nav.js"></script>
	<script id="jquery_144" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/202/4e4ejrix/jquery.min.js"></script>
	<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/202/4e4ejrix/jquery.min.js"></script>
	<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/202/4e4ejrix/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/202/4e4ejrix/iconfont.css">
</head>
<body>
    <div class="nav">
        <div class="nav-top">
            <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="http://sandbox.runjs.cn/uploads/rs/202/4e4ejrix/mini.png" ></div>
        </div>
        <ul>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-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>
                </ul>
            </li>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-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>
                </ul>
            </li>
            <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i class="my-icon nav-more"></i></a>
                <ul>
                    <li><a href="javascript:;"><span>订单列表</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

@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;}