带旋转箭头的手风琴菜单

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