使箭头向后切换(0deg）;x〃;单击关闭图标

Have arrow toggle back (0deg) when "x" close icon is clicked

本文关键字：单击 图标 0deg      更新时间：2023-09-26

我一直在制作手风琴，它接近我需要的样子。然而，在单击关闭"x"图标后，我似乎无法让箭头旋转回0度。开关闭合，但箭头保持在向下位置。

小提琴

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

问题就在这一行：

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

您正在搜索X按钮内部的箭头。你需要向上搜索2个元素：

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

更改此行

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

带有

 $(this).parent().prev('.view-m').find('span').css('transform', 'rotate(0deg)');

演示

相关文章：