javascript - 菜单滑出后使按钮中的箭头指向下方

Question

我有一个按钮，当用户将鼠标悬停在它上面时，它会附加一个箭头。单击时，内容 div 使用 jQuery.slideToggle() 在其包装器中滑出。

一旦 div 滑出，我想让按钮中的箭头旋转 180 度，表示按下它将使内容 div 在再次单击时下降。

我制作了一个 JsFiddle 来展示我目前拥有的东西:https://jsfiddle.net/414mwv17/

单击按钮后使箭头指向下方的最佳方法是什么？

Answer 1

为您希望克拉的显示方式创建一个新类:

#makeGroupButton span.rotate:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(135deg);
}

注意选择器中的类添加。

然后更改 javascript/jQuery 以仅切换该类:

 $('#makeGroupButton').bind('click', function(){
     $('#slideout').slideToggle(500);
     $(this).children('span').toggleClass('rotate');
  });

你不能用 jQuery 直接选择 :after 和 :before 伪选择器，所以改变类，添加 CSS 通常是最简单的方法。

Updated fiddle