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

Question

更新：之前没说明白，我用的是React.js html 里面的className呈现的时候会编译成class，不是这方面的问题。。

---

有这么一个侧边栏目录，我想实现这样的效果，点击一级目录的时候，显示活跃效果，同时，有子目录的目录需要在点击的时候实现展开和收起切换（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();
})

Answer 1

直接这样可以啦

$(".sidebar-menu>li").click(function(){
    console.log('sidebar menu li~~')
    $(this).toggleClass("active");
    $(this).siblings().removeClass("active")
});

Answer 2

你这段代码错误很多哦，看你的html，貌似你不是很熟悉html
1.第一个问题：html的类是class，而不是className
2.------------------------------------------

$(".treeview-menu").click(function(){
    $(this).toggleClass("active");
});

你的这段代码，是给li里面的ul加上的click事件，但是你默认是隐藏他的，你应该给外面的li设置点击事件的。

下面是代码：

<ul class="sidebar-menu">
    <li class="header">HEADER</li>
    <li><Link to="/" ><i class="fa fa-link"></i> <span>概览</span></Link></li>
    <li><Link to="customer"><i class="fa fa-link"></i> <span>客户管理</span></Link></li>
    <li class="treeview">
        <a href="#"><i class="fa fa-link"></i> <span>数据统计</span> <i class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">
            <li><Link to="general"> <i class="fa fa-link"></i><span>日常统计</span></Link></li>
            <li><Link to="recharge"><i class="fa fa-link"></i> <span>充值统计</span></Link></li>
            <li><Link to="order"> <i class="fa fa-link"></i><span>兑换统计</span></Link></li>
        </ul>
    </li>
</ul>


$(function(){
    $(".sidebar-menu li").click(function(){
      $(this).addClass("active").siblings().removeClass("active")
    });
    $(".treeview").click(function(){
        $(".treeview-menu").toggleClass("active");
    });
    $(".treeview-menu li").click(function(event){
        event.stopPropagation();
    })
})