html - JQuery toggleClass() 影响嵌套列表

Question

我正在使用 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 只是一个标准的嵌套列表。