左侧菜单栏

自己写的项目从别处找一直覆盖其他样式，用了这个没有覆盖，~很开心

转载自：http://blog.csdn.net/DouBoomFly/article/details/72694802

jquery

$('.inactive').click(function(e){  
    e.preventDefault();  
    if($(this).siblings('ul').css('display')=='none'){//下拉  
        $(this).removeClass('glyphicon-menu-right');  
        $(this).addClass('glyphicon-menu-down');  
        $(this).siblings('ul').slideDown(100).children('li');  
    }else{//回收  
        $(this).removeClass('glyphicon-menu-down');  
        $(this).addClass('glyphicon-menu-right');  
        $(this).siblings('ul').slideUp(100);  
    }  
});  

html

<div class="panel panel-primary">  
    <div class="panel-heading">商品分类</div>  
    <div>  
        <nav>  
            <ul class="nav nav-pills nav-stacked">  
                <li><a href="" class="glyphicon glyphicon-menu-right inactive"> 计算机</a>  
                    <ul style="display: none" class="nav nav-pills nav-stacked">  
                        <li><a href="" class="glyphicon glyphicon-menu-right"> -- 台式机</a></li>   
                        <li><a href="" class="glyphicon glyphicon-menu-right"> -- 笔记本</a></li>   
                        <li><a href="" class="glyphicon glyphicon-menu-right"> -- 掌上电脑</a></li>  
                    </ul>  
                </li>  
                <li><a href="" class="glyphicon glyphicon-menu-right inactive"> 数码产品</a>  
                    <ul style="display: none" class="nav nav-pills nav-stacked">  
                        <li><a href="" class="glyphicon glyphicon-menu-right"> -- 数码照相机</a></li>   
                        <li><a href="" class="glyphicon glyphicon-menu-right"> -- 数码摄像机</a></li>   
                    </ul>  
                </li>  
            </ul>  
        </nav>  
    </div>  
</div>