一行JQuery代码实现伸缩导航栏

这个实现效果是我在网上看到的一个案例，正好在学习JQuery就想着自己来实现一下,还没有学习到JQuery动画的时候想，写了大概几十行代码，想了各种思路设置浮动、修改HTML结构。都没能实现，最后差点都放弃了。然后学到JQuery动画这一部分的时候用了一个简单的JQuery封装的方法就解决了slideUp()和slideDown()。下面我们一起来看看代码。

HTML文档结构

    

        

            
图表
            

                
〇 ChartJS
                
〇 Morris
                
〇 Flot
                
〇 linline charts
            
        
        

            
UI元素
            

                
〇 一般
                
〇 lcons图标
                
〇 按钮
                
〇 滑块
                
〇 时间表
                
〇 模态框
            
        
        

            
表单
            

                
〇 一般表单
                
〇 高级表单
                
〇 可编程表单
            
        
        

            
表格
            

                
〇 简单表格
                
〇 事件表格
            
        
    

 css文件

*{
    margin:0;
    padding:0;
    list-style:0;
    font-size:12px;
    color:#8aa4af;
    text-decoration: none;
}
.wrapUl{
    width:230px;
    height:800px;
    background:#222d32;
}
.list-caption{
    display:block;
    text-align: center;
    line-height: 44px;
    width:230px;
    height:44px;
    font-size:14px;
}
.innerList li{
    display:block;
    background:#2c3b41;
    width:223px;
    height:30px;
}
.innerList li:hover{
    background:#222d32;
}

.list-caption:hover{
    color:white;
}

最后JQuery代码