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

}); 

И мой HTML это просто стандартный вложенный список.

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