Exchanging CSS classes with simple JQuery function

Question

Exchanging CSS classes with simple JQuery function

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)

1

I have a dropdown menu and in the corner of <li> I have an icon of Font Awesome that symbolizes an upside-down arrow ( fa fa-level-up pull-right ) and when the user clicks on that <li> and opens the dropdown, the I would like to use JQuery to create a new JQuery code, but I do not know how to get the JQuery path to find the icon, it follows the JQuery code I have and the 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>

html jquery css

asked by anonymous 08.08.2017 / 00:21

3 answers

2

I like to use

$(this).toggleClass('fa-angle-double-down fa-angle-double-up');

for the purpose you want.

When I click the button the down arrow gives way to the up arrow and vice versa.

Example, using Bootstrap, JQuery and Awesome Font:

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><aclass="btn btn-info btn-lg fa fa-angle-double-down" id="mais-sobre" href="#"></a>

JQuery:

$('#mais-sobre').on('click', function(event){
    event.preventDefault();
    $(this).toggleClass('fa-angle-double-down fa-angle-double-up');
});

Fiddle

08.08.2017 / 00:43

0

Try this code:

 $('.liClassLBV').click(function(){
       $('.liClassLBV').not(this).find('span i').removeClass("fa-level-up").addClass("fa-level-down");

       $(this).find('span i').removeClass("fa-level-down").addClass("fa-level-up");

})

08.08.2017 / 00:40

How to return the value of a select to an ng-repeat in the angle Query with JOIN in 3 tables

score 2 · Accepted Answer

Add or remove only the class you want to change:

removeClass("class que vai sair").addClass("class que vai entrar");

You do not need to repeat the ones you do not want to change.

Change your code:

$(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");        
    });
})

By:

$(".longBarVertical .menuVertical .liClassLBV .span .i").on("change.level", function() {                   
        $(this).prev().find(".fa").eq(1).toggleClass("fa-level-up");
});