我有一个按钮,当用户将鼠标悬停在它上面时,它会附加一个箭头。单击时,内容 div 使用 jQuery.slideToggle()
在其包装器中滑出。
一旦 div 滑出,我想让按钮中的箭头旋转 180 度,表示按下它将使内容 div 在再次单击时下降。
我制作了一个 JsFiddle 来展示我目前拥有的东西:https://jsfiddle.net/414mwv17/
单击按钮后使箭头指向下方的最佳方法是什么?
最佳答案
为您希望克拉的显示方式创建一个新类:
#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
关于javascript - 菜单滑出后使按钮中的箭头指向下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39056779/