SideNav切換問題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