jQuery对同一元素应用两个效果

有这么一个侧边栏目录，我想实现这样的效果，点击一级目录的时候，显示活跃效果，同时，有子目录的目录需要在点击的时候实现展开和收起切换（toggleClass("active")）。不过我的代码里toggleClass好像没起作用，求指导。

<ul className="sidebar-menu">
    <li className="header">HEADER</li>
    <li><Link to="/" ><i className="fa fa-link"></i> <span>概览</span></Link></li>
    <li><Link to="customer"><i className="fa fa-link"></i> <span>客户管理</span></Link></li>
    <li className="treeview">
        <a href="#"><i className="fa fa-link"></i> <span>数据统计</span> <i className="fa fa-angle-left pull-right"></i></a>
        <ul className="treeview-menu">
            <li><Link to="general"> <i className="fa fa-link"></i><span>日常统计</span></Link></li>
            <li><Link to="recharge"><i className="fa fa-link"></i> <span>充值统计</span></Link></li>
            <li><Link to="order"> <i className="fa fa-link"></i><span>兑换统计</span></Link></li>
        </ul>
    </li>
</ul>
$(".sidebar-menu li").click(function(){
  $(this).addClass("active").siblings().removeClass("active")
});
$(".treeview").click(function(){
    $(this).toggleClass("active");
});
$(".treeview-menu li").click(function(event){
    event.stopPropagation();
})