Javascript 点击后切换图标滑动至添加购物车按钮

我有一个加号图标，悬停，幻灯片添加到购物车按钮。我想实现相同的功能，使用按钮点击。 我尝试过CSS，但它不起作用。JQuery能否实现这一点

HTML

CSS

.add-cart-a
{
宽度：181px；
}
.添加新购物车
{
高度：56px；
}
.socialIcons.添加购物车新建{
背景颜色：黄色；
列表样式：无；
显示：内联块；
保证金：4倍；
边界半径：2米；
溢出：隐藏；
}
.socialIcons.添加新购物车{
显示：块；
填充：0.5em；
最小宽度：2.5em；
最大宽度：2.5em；
高度：2.28571429em；
空白：nowrap；
行高：1.5em；/*仅当您使用图标写入文本时，它才起作用*/
过渡：0.5s；
文字装饰：无；
字体系列：arial；
颜色：#fff；
}
.socialIcons.添加购物车新i{
右边距：0.5em；
}
.socialIcons.添加购物车新建：悬停a{
最大宽度：205px；
右侧填充：1em；
}
.socialIcons.添加购物车新建{
背景色：#EC7F4A；
}
.socialIcons.添加新购物车
{
位置：相对位置；
底部：5px；
右：0.3px；
} 
.文本添加购物车
{
位置：相对位置；
右：7px；
底部：12px；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
}

---

这是我尝试过的代码：

如果您想将其作为仅CSS的解决方案，可以使用复选框和focus伪类，这可能有点过头了。它可以很容易地用少量的JS来完成

$('.add-cart-new').click(function() {
  $(this).toggleClass('is-open');
});

---

然后，您可以将

.socialIcons.add cart new:hover a

替换为

.socialIcons.add-cart-new.is-open a

如果您想将其作为CSS唯一的解决方案，可以使用复选框和焦点伪类，这可能有点过头了。它可以很容易地用少量的JS来完成

$('.add-cart-new').click(function() {
  $(this).toggleClass('is-open');
});

然后，您可以替换

.socialIcons.add cart new:将a

悬停在

.socialIcons.add-cart-new.is-打开a