javascript - 单击 "x"关闭图标时，箭头向后切换(0 度)

Question

我一直在研究 Accordion ，让它接近我需要的样子。但是，在单击关闭的“x”图标后，我似乎无法让箭头旋转回 0 度。切换关闭，但箭头保持向下位置。

FIDDLE

  $('#main').each(function () {
      var $accordian = $(this);
      $accordian.find('.view-m').on('click', function () {
          $accordian.find('.mobile-content-body').slideUp();
          $accordian.find('span').css('transform', 'rotate(0deg)');
          if (!$(this).next().is(':visible')) {
              $(this).next().slideDown();
              $(this).find('span').css('transform', 'rotate(90deg)');
              $(this).next().slideDown();
              $accordian.find('.close').click(function () {
                  $(this).parent().slideUp(500);
                  $(this).find('span').css('transform', 'rotate(0deg)');
              });
          }
      });
  });

Answer 1

问题出在这一行:

$(this).find('span').css('transform', 'rotate(0deg)');

您正在搜索 X 按钮内部的箭头。你需要向上移动 2 个元素，然后在那里搜索:

Fixed Fiddle

  $('#main').each(function () {
      var $accordian = $(this);
      $accordian.find('.view-m').on('click', function () {
          $accordian.find('.mobile-content-body').slideUp();
          $accordian.find('span').css('transform', 'rotate(0deg)');
          if (!$(this).next().is(':visible')) {
              $(this).next().slideDown();
              $(this).find('span').css('transform', 'rotate(90deg)');
              $(this).next().slideDown();
              $accordian.find('.close').click(function () {
                  $(this).parent().slideUp(500);
                  $(this).parent().parent().find('span').css('transform', 'rotate(0deg)');
              });
          }
      });
  });