javascript - 带旋转箭头的 Accordion 菜单

Question

我创建了一个简单的 Accordion ，点击时带有旋转箭头。它工作正常，但有一个异常(exception):

• 我有一些可折叠的元素，如果我点击第一个，它就可以正常工作。但是点击另一个不会将之前的图标旋转到默认状态。

点击其他可折叠项时，如何使箭头返回默认状态？

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