我可以使用javascript原型来点击动画吗？

Question

我有这个非常简单的功能绑定：

$('a.accordion-toggle').click(function() {
  $(this).children('.glyphicon').toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
});

当我点击一行文字时，

取代了我的雪佛龙。我想的不是替换，而是将人字形的旋转设置为90度。我刚刚阅读了原型以及如何同时向该原型的所有对象添加函数。我的问题（因为我是原型的新手）是否可以从jquery选择器创建一个原型并为其添加一个函数？

类似的东西，

DropdownArrow = $('a.accordion-toggle')
DropdownArrow.prototype.turn = function(){...}

Answer 1

我在点击时切换一个动画图标的类，例如：

<强> JS

$('a.accordion-toggle').click(function() {
  $(this).children('.glyphicon').toggleClass('rotate-icon');
});

<强> CSS

.rotate-icon{
    transform: rotate(180deg);
}

I've created a pen to show the animation working

<强>更新

我忘了提到你需要为你动画的元素添加一个过渡来创建一个漂亮的平滑动画效果，例如：

a {
    transition: 350ms cubic-bezier(0.4,0.6,0.2,0.7);
}

你也可以使用缓入/缓出等缓和部分，但在这里我使用cubic-bezier，它可以更好地控制缓动 - here's a tool you can use to play around/learn about it

Answer 2

你可以，但是像这样：

{{1}}