旋转箭头的手风琴菜单

Question

我创建了一个简单的手风琴，点击时带有旋转箭头。它工作正常，但有一个例外：

• 我有几个可折叠的项目，如果我点击第一个，它工作正常。但单击另一个不会将上一个图标旋转到默认状态。

如何使箭头在单击其他可折叠项目时回到默认状态？

$(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

请试试这个：

$(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'); 
    }) 
})