2

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>
1
  • 1
    Já testou trocando apenas a classe em questão? Em vez de removeClass("fa fa-level-down pull-right").addClass("fa fa-level-up pull-right"); colocar removeClass("fa-level-down").addClass("fa-level-up");
    – Sam
    Commented 7/08/2017 às 22:31

3 Respostas 3

4

Adicione ou remova apenas as class que você quer mudar:

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

Não precisa repetir as outras que você não quer alterar.

Troque seu código:

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

Por:

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

Eu gosto de usar

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

para o efeito que você quer.

Quando eu clico no botão a seta para baixo dá lugar à seta para cima e vice-versa.

Exemplo, usando Bootstrap, JQuery e Font Awesome:

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>

<a class="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

1
  • @GabrielQ resolveu seu problema? Commented 10/08/2017 às 22:45
0

Tente este codigo:

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

})
1
  • Interessante, mas ainda não deu certo. Eu sinto que o problema maior é logo no começo da função, no $('.liClassLBV')... eu acho que não estamos colocando o "caminho" correto, ou isso não tem relação?
    – D. Watson
    Commented 7/08/2017 às 22:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .