SideNav toggle issue Liferay

Question

Я создал боковое меню в Liferay, переопределяющее функцию навигации по умолчанию, которая предоставляет функцию переключения значков глифов при обнаружении родителя. Я хочу, чтобы глиф сталкивался в правильном направлении, когда нет выпадающего списка и лицом вниз, когда есть падение. Может ли кто-нибудь помочь мне в решении этой проблемы?

Заранее спасибо.

Мой код:

java script: 
$(document).ready(function(){ 
if ($(".level-1 li").has('ul.level-2')){ 
$('ul.level-2').parent().find('a:first').after('<button class = "btnn"><span class = "chevron"></span></button>'); 
} 
$('ul.level-2').css('display','none'); 
$('button').click(function(){ 
$(this).next().slideToggle(); 

}); }); 


Css: 

.btnn { 
float: right; 
border-color: #E8EBF2; 
background-color: #E8EBF2; 
border: none; 
z-index:90; 
display:inline-block !important; 

} 


.level-1 li a { 
display:inline-block; 
} 


.chevron::before { 
border-style: solid; 
border-width: 0.25em 0.25em 0 0; 
content: ''; 
display: inline-block; 
height: 0.45em; 
left: 0; 
transform: rotate(45deg); 
position: relative; 
vertical-align: top; 
width: 0.45em; 
} 

.chevron:after { 
right: 0; 
transform: rotate(90deg); 
/* border-style: solid; */ 
border-width: 0 0 0 0; 
content: ''; 
display: inline-block; 
/* height: 0.45em; */ 
position: relative; 
vertical-align: top; 
/* width: 0.45em; */ 
} 

Это мой codepen ссылка http://codepen.io/anon/pen/EypNpQ

Answer 1

Добавить и удалить "вниз класс" на события нажатия

$(document).ready(function(){ 
if ($(".level-1 li").has('ul.level-2')){ 
$('ul.level-2').parent().find('a:first').after('<button class = "btnn"><span class = "chevron"></span></button>'); 
} 
$('ul.level-2').css('display','none'); 
$('button').click(function(){ 
$(this).next().slideToggle(); 
    if($(this).hasClass('chevron-down')) 
    $(this).removeClass('chevron-down'); 
    else 
    $(this).addClass('chevron-down'); 
}); }); 

Here a working pen