Jquery 如何切换下拉箭头

这是我用来隐藏和显示带有滑动切换效果的div的代码

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
        });
    });

然而，我想添加一些切换箭头来显示切换的div是向上还是向下

这就是我目前所拥有的，它完成了我希望它完成的一半：

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery("#arrow-up").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
            jQuery("#arrow-up").toggle();
            jQuery("#arrow-down").toggle();
        });
});

这将切换箭头，但存在两个问题：

向下箭头保持显示状态

每个div切换每个箭头，因此当一些div向上，一个向下时，它们都显示为向下

任何想法都将受到欢迎

使用类

jQuery(document).ready(function() {
    jQuery(".option-content").hide().removeClass("shown").addClass("hidden");
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500)
                  .removeClass("hidden").addClass("shown");
        });
});

然后使用CSS:

.option-content.hidden{ background-image:url(hidden.png); } 
.option-content.shown{ background-image:url(shown.png); } 

• 对装饰性箭头图标使用

  ：before

  伪
• 使用jQuery的

  .toggleClass（）

jQuery（函数（$）{//DOM ready和$alias在作用域中
/**
*选项下拉列表。滑动切换
*/
$（“.option heading”）。在（'click'，function（）上{
$（this）.toggleClass（'is-active'）.next（'option content'）.stop（）.slideToggle（500）；
});
});
。选项标题：{content:“\25bc”；}
.option heading.处于活动状态：{content:“\25b2”；}
/*助手*/
.是隐藏的{display:none；}
标题
内容
内容
内容
内容
内容
内容
内容
内容
Hi Solanki-这可能回答了这个问题，但如果您能用一个更完整的示例解释为什么此解决方案有效，那就更好了。
 $('.nav-arrow').on('click', function () {
    $(this).parents('.col-md-6').siblings().find('li').removeClass('subnav---open').find('ul').slideUp('fast');
    $(this).parent().toggleClass('subnav---open').find('ul').first().slideToggle('fast');
});