Dropdown Hidden

Question

Good afternoon,

I have a problem in my JS menu where there is a dropdown menu:

            <!-- 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> 

My problem is when I ask to hide the dropdown but the menu does not make the arrow Rotate 180 down again, the arrow continues facing up.

Below is my JS code:

<!-- 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);
}
/********************************************/

Could someone help me tell what I’m doing wrong so the little arrow just turns up and doesn’t come back down?

Answer 1

When you are using $(this).css("transform") == 'none', the $(this) refers to the <a>. This means it will always return true because you do not change the style of the tag <a>.

When you are using just below $(this).children().css(), you are applying this style to the children tags of <a>, which are the <span> and the <i>.

I recommend changing the code to only turn the <i> by changing the click function for this, or something similar:

$('.nav-link').click(function() {
    $(this).find('i.icon-rotates').toggleClass("rotate");
});