Javascript 上下箭头单击

我已经为一个按钮创建了HTML和css，我需要一个基于点击的上下箭头切换。我对HTML和CSS很在行，但对使用jQuery来实现这一点却不太在行。有谁能让我开始谈这件事吗？ 单击.js时，自定义袖子选项箭头应向上/向下更改

.js自定义袖子选项{
宽度：自动；
最小宽度：3.8rem；
高度：3雷姆；
显示：内联块；
边框：1px实心#d1cac5；
背景：#f7f7f7；
保证金权利：0.5雷姆；
边缘底部：0.5雷姆；
文本对齐：居中；
}
.js向下箭头{
显示：内联块；
宽度：0；
身高：0；
左边框：4px实心透明；
右边框：4px实心透明；
边框顶部：6px实心#233354；
位置：相对位置；
左：7px；
}
.js向上箭头{
显示：内联块；
宽度：0；
身高：0；
左边框：4px实心透明；
右边框：4px实心透明；
边框底部：6px实心#233354；
位置：相对位置；
左：6px；
底部：12px；
}

---

这将是这样的。。当然，您必须根据需要修改它

$(function(){
$(".js-custom-sleeve-option").on('click' , function(){
  this.find('span').removeClass('js-arrow-down').end().addClass('js-arrow-up');
});
});

您可以使用jquery函数的

$（'.js自定义套筒选项'）。单击（函数（）{
$（this）.children（'span'）.toggleClass（'js-arrow-down-js-arrow-up'））
})

.js自定义袖子选项{
宽度：自动；
最小宽度：3.8rem；
高度：3雷姆；
显示：内联块；
边框：1px实心#d1cac5；
背景：#f7f7f7；
保证金权利：0.5雷姆；
边缘底部：0.5雷姆；
文本对齐：居中；
}
.js向下箭头{
显示：内联块；
宽度：0；
身高：0；
左边框：4px实心透明；
右边框：4px实心透明；
边框顶部：6px实心#233354；
位置：相对位置；
左：7px；
}
.js向上箭头{
显示：内联块；
宽度：0；
身高：0；
左边框：4px实心透明；
右边框：4px实心透明；
边框底部：6px实心#233354；
位置：相对位置；
左：6px；
底部：12px；
}