2
I have a dropdown menu and in the corner of <li>
I have an icon of the Font Awesome
which symbolises an upward-facing arrow (fa fa-level-up pull-right
) and when the user clicks on this <li>
and open the dropdown, the arrow should turn down (fa fa-level-down pull-right
), however I do not know how to put the path to Jquery find the icon, follow the Jquery code I have and 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>
Have you tried changing only the class in question? Instead of
removeClass("fa fa-level-down pull-right").addClass("fa fa-level-up pull-right");
placeremoveClass("fa-level-down").addClass("fa-level-up");
– Sam