Html JQuery toggleClass（）影响嵌套列表

我正在使用JQuery，所以当我在垂直导航中切换父链接时，基本上它会打开子列表，并在单击时显示一个向下的箭头。我遇到的问题是，当单击列表时，我单击子列表链接，这些链接上也会出现箭头。我只希望它也只出现在父元素上。我怎样才能做到这一点

这是我的CSS代码：

.sidebar-category li > a:before {
    color: #ffffff;
    content: '► ';
}

.sidebar-category li > a:only-child:before {
    content: ' ';
}

.sidebar-category li.clicked > a:before {
    color: #ff0000;
    content: '▼ ';
}

这是我的JQuery代码：

$(document).ready(function() { 
    $(".sidebar-category > li").click(function(event) {
        event.stopPropagation();
        $(this).find("ul").fadeToggle();
        return false;
    });

    $('.sidebar-category > li').click(function(event){
        $(this).toggleClass('clicked')
    }); 

});

---

我的HTML只是一个标准的嵌套列表

你能为这个创建一个提琴吗？它有点复杂，因为我的导航是动态生成的，而且我涉及了很多样式，我只是想知道如何使toggleClass（）不影响嵌套列表，而只影响单击时的父列表。为什么$（this.toggleClass（'clicked'）不在同一个位置。单击“侦听器”而不是它的其余部分？你只需要一个听众。。。和$（this.find（'ul'）将在当前“li”中查找所有嵌套的ul，您可能希望尝试“$（this.CHILDREN（'ul'）”。如果没有JSFIDLE或HTML结构，我只能帮你了