我怎么做手风琴菜单切换图标？

Question

Im trying to implement accordion menu. I did that and it's not working. I just want to do toggle icon

 $('.logo-button').click(function(){ $(this).find('.my-arrow').toggleClass('down'); });

 .my-arrow.down { transform:rotate(450deg);}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15"> <span class="left-side-panel">Text</span> <i class="fa fa-angle-right my-arrow"></i> </a>

Answer 1

In order for the transform property to work, try to set display: block or display:inline-block within the .my-arrow.down class:

.my-arrow.down {
    display: block;
    transform:rotate(450deg);
    ...

You also need to include content within your <i> element. For example, you could use the > character:

<i class="fa fa-angle-right my-arrow">
     >
</i>

Here is a working example with your code and my modifications:

 $('.logo-button').click(function(){ $(this).find('.my-arrow').toggleClass('down'); });

 .my-arrow.down { display: inline-block; transform:rotate(450deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15"> <span class="left-side-panel">Text</span> <i class="fa fa-angle-right my-arrow">></i> </a>