Tenho um menu com dropdown e no canto da <li>
eu tenho um icone do Font Awesome
que simboliza uma flecha virada pra cima (fa fa-level-up pull-right
) e quando o usuario clicar nessa <li>
e abrir o dropdown, a flecha deveria virar pra baixo (fa fa-level-down pull-right
), porém eu não sei como colocar o caminho pro JQuery achar o icone, segue o código JQuery que eu tenho e o HTML.
JQuery:
$(function(){
$(".longBarVertical .menuVertical .liClassLBV .span .i").on("change.level", function() {
$(this).prev().find(".fa").eq(1).removeClass("fa fa-level-down pull-right").addClass("fa fa-level-up pull-right");
});
$('.longBarVertical .menuVertical .liClassLBV .span .i').on("change.level", function() {
$(this).prev().find(".fa").eq(1).removeClass("fa fa-level-up pull-right").addClass("fa fa-level-down pull-right");
});
})
HTML:
<div class="longBarVertical">
<div class="logo">
<a href="home.php">
<img src="img/logoGAP.png">
</a>
</div>
<ul class="menuVertical">
<li>
<a class="liClassLBV" href="#" data-toggle="collapse" data-target="#submenu-1">
<i class="fa fa-file-text-o"></i><span>Atendimento<i class="fa fa-level-up pull-right"></i></span>
</a>
</li>
<div class="submenu">
<ul id="submenu-1" class="collapse">
<li><a href="#"><i class="fa fa-angle-double-right"></i><span> Novo </span></a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i><span> Em aberto </span></a></li>
</ul>
</div>
</ul>
</div>
removeClass("fa fa-level-down pull-right").addClass("fa fa-level-up pull-right");
colocarremoveClass("fa-level-down").addClass("fa-level-up");