Akkordeon-Menü mit rotierenden Pfeilen

Question

Ich habe ein einfaches Akkordeon mit rotierenden Pfeilen auf Klick erstellt. Es funktioniert gut mit einer Ausnahme:

Ich habe ein paar zusammenklappbare Artikel und wenn ich auf den ersten klicke funktioniert es ok. Wenn Sie jedoch auf die andere Schaltfläche klicken, wird das vorherige Symbol nicht in den Standardzustand versetzt.

Wie wird der Pfeil erstellt, um zum Standardzustand zurückzukehren, wenn auf das andere reduzierbare Element geklickt wird?

$(function() { 
 
    $('.arrow-r').on('click', function() { 
 
    $(this).find('.fa-angle-down').toggleClass('rotate-element'); 
 
    }) 
 
})

.rotate-element { 
 
    @include transform (rotate(180deg)); 
 
} 
 
.fa-angle-down { 
 
    &.rotate-icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 17px; 
 
    @include transition (all 150ms ease-in 0s); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="collapsible collapsible-accordion"> 
 
    <li><a class="collapsible-header arrow-r"> Menu 1<i class="fa fa-angle-down rotate-icon"></i></a> 
 
    <div class="collapsible-body"> 
 
     <ul> 
 
     <li><a>Item 1</a> 
 
     </li> 
 
     <li><a>Item 2</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li><a class="collapsible-header arrow-r"> Menu 2<i class="fa fa-angle-down rotate-icon"></i></a> 
 
    <div class="collapsible-body"> 
 
     <ul> 
 
     <li><a>Item 1</a> 
 
     </li> 
 
     <li><a>Item 2</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li><a class="collapsible-header"> Menu 3</a> 
 
    <div class="collapsible-body"> 
 
     <ul> 
 
     <li><a>Item 1</a> 
 
     </li> 
 
     <li><a>Item 2</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </li>

Answer 1

Bitte versuchen Sie dies:

$(function() { 
    $('.arrow-r').on('click', function() { 
    //Reset all but the current 
    $('.arrow-r').not(this).find('.fa-angle-down').removeClass('rotate-element'); 
    //Rotate/reset the clicked one 
    $(this).find('.fa-angle-down').toggleClass('rotate-element'); 
    }) 
})