html - toggleClass() affecting nested list

Question

i am using JQuery so when i toggle my parent link in my vertical navigation, basically it opens the sub list with a arrow pointing down on clicked, the problem i have is when the list is clicked, and i click on the sub list links, and arrow appears on those too, i just want it too appear on a parent element only. how can i achieve this?

This is my css code:

.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: '▼ ';
}

This is my JQuery code:

$(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')
        return false;
    }); 

});

And my html is just a standard nested list.

Answer 1

尝试

.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: '▼ ';
}