Question

我正在尝试使用可点击的切换按钮来打开内容，并切换图标，我可以在点击时更改内容滑块，一旦点击任何其他内容返回到原始的内容，并在点击时切换图标，但是当我点击另一个切换打开时不切换。我想要做的是将图标切换回原来的位置，你可以帮我解决这个问题，

感谢

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

    });

  });

这是未经考验的......如果没有小提琴，就很难完成工作！

单击另一个切换div时，将“i”元素切换回原始位置

1 个答案: