how to change submenu arrow icon according to the menu display-CodePudding

this is the my menu

<ul>
    <li >
        <a >
            <i ></i>
            <p>
                Dashboard
                <i ></i>
            </p>
        </a>
        <ul >
            <li >
                <a href="../../index.html" >
                    <i ></i>
                    <p>Dashboard v1</p>
                </a>
            </li>
        </ul>
    </li>
</ul>

this is the jquery function that i use for sub menu

$(document).ready(function(){
    $('.sub-parent').click(function(e){
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();
    });
});

css class

 .sub-menu{display: none;}

Currently left arrow icon display in the menu. I used this for it

when sub menu open, i need to change this icon. How i do it.?

CodePudding user response：

You can use the transform property to rotate the icon.

Modified your code to make it work, check below.

$(document).ready(function(){
    $('.sub-parent').click(function(e){
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();

      $(".right").toggleClass('rotate-icon');
    });
});

.sub-menu{display: none;}

.right{
  transition: 0.5s transform ease-in-out;
}

.rotate-icon {
  transform:rotate(-90deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li >
        <a >
            <i ></i>
            <p>
                Dashboard
                <i ></i>
            </p>
        </a>
        <ul >
            <li >
                <a href="../../index.html" >
                    <i ></i>
                    <p>Dashboard v1</p>
                </a>
            </li>
        </ul>
    </li>
</ul>

CodePudding user response：

You can use:

$(document).ready(function(){
    $('.sub-parent').click(function(e){
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();

      $(this).children('p i').toggleClass('fa-angle-left')
      $(this).children('p i').toggleClass('fa-angle-right')
    });
});