javascript - 单击另一个切换 div 时将图标切换回 "i"元素到原始位置

Question

我正在尝试使用可打开内容的可点击切换按钮来制作 Accordion ，并切换图标，我能够在点击时更改内容 slider ，一旦点击任何其他内容返回到原始内容，并在单击时切换图标，但当我单击另一个切换器打开时则不会。我想做的是将图标切换回原来的位置，你能帮我解决这个问题吗，

谢谢

HTML

<div id="accordion">   

    <p class="accordion-toggle">
        <i class="fa fa-angle-right"></i>
        <strong>title</strong>
    </p>

    <div class="accordion-content">
        <p>content</p>
    </div>

</div>

JS

      $(document).ready(function($) {
        $('#accordion').find('.accordion-toggle').click(function(){

          //Expand or collapse this panel
          $(this).next().slideToggle('slow');

          //Hide the other panels
          $(".accordion-content").not($(this).next()).slideUp('slow');

        //Toggle icon
        $(this).find('i').toggleClass('fa-angle-right fa-angle-down');

        });

      });

Answer 1

与其尝试切换图标，不如像这样在其上切换旋转类可能更简单:

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('slow');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('slow');

    //Toggle icon
    $('.accordian-toggle i.fa-angle-right').removeClass('fa-rotate-90');
    $(this).children('i.fa-angle-right').toggleClass('fa-rotate-90');

    });

  });

这是未经测试的......如果没有 fiddle 可玩，很难工作!