0

Boa tarde,

Estou com um problema no meu JS do menu onde existe um menu Dropdown:

            <!-- MENU USER -->
            <div class="collapse navbar-collapse navbar-user" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown" rule="button" data-toggle="dropdown" aria-haspopup="true" href="#" id="navbarDropdownMenuLink">
                            <?php 
                                echo "<span class=\"userlogin\">".get_info_session($APP_IN_CODIGO, 'USU_ST_NOME')."</span>";
                            ?> 
                            <i class="fa fa-angle-down icon-rotates"></i>
                        </a>                                     

                        <!-- MENU DROPDOWN LOGOUT USER -->
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                                    
                            <a  href="?close_session" class="dropdown-item">Logout</a> 
                        </div>
                        <!-- FIM MENU DROPDOWN --> 

                    </li>
                </ul>
            </div> 

Meu problema é quando peço pra esconder o dropdown mas o menu não faz o rotate da setinha de 180 para baixo novamente, a setinha continua voltada para cima.

Segue abaixo codigo do meu JS:

<!-- JS PARA EFETUAR O GIRO DO FONTAWESOME ANGLE-DOWN -->
<script type="text/javascript">
    $('.nav-link').click(function(){
        if ($(this).css("transform") == 'none') {
            $(".dropdown").on("hidden.bs.dropdown", function(){
                $(this).find('.nav-link').children().css('transform', 'none');
            });

            $(this).children().css('transform', 'rotate(180deg)');
        } else {
            $(this).children().css('transform', 'none');
        }
    });
</script>  

CSS:

/* EFETUAR O GIRO DO FONTAWESOME ANGLE-DOWN */
.icon-rotates {
  transition: 0.5s;
}

.icon-rotates.rotate {
  transform: rotate(180deg);
}
/********************************************/

Alguém poderia me ajudar a dizer o que estou fazendo de errado para a setinha somente girar para cima e não voltar para baixo?

0

1 Resposta 1

0

Quando você está utilizando $(this).css("transform") == 'none', o $(this) se refere ao <a>. Isso quer dizer que sempre vai retornar verdadeiro, porque você não altera o estilo da tag <a>.

Quando você está utilizando logo abaixo $(this).children().css(), você está aplicando este estilo aos tags filhos de <a>, que são o <span> e o <i>.

Recomendo a alteração do código para somente girar o <i> alterando a função de click para isto, ou algo similar:

$('.nav-link').click(function() {
    $(this).find('i.icon-rotates').toggleClass("rotate");
});
3
  • Kosonome Bom dia, deu certo agora a setinha volta, porém tenho outro problema. Quando clicava em outra opção do MENU, a setinha da outra opção do MENU subia e a que estava para cima descia. Como posso fazer isso com essa sua sugestão? Desde já me desculpe pela ignorância por JS, não sei muito sobre a linguagem. Obrigado. 7/10/2019 às 11:48
  • Se você editar sua perguntar com mais código desse outro menu da onde está acontecendo o problema, posso te ajudar.
    – Kosonome
    8/10/2019 às 19:12
  • Bom dia Kosonome, Consegui resolvendo meu problema inserindo a parte do código "hidden.bs.dropdown" dentro do if($(this).css("transform") == 'none') Não sei porque funcionou, vou alterar o código do script para que você visualize como ficou. 10/10/2019 às 12:18

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 .