如何切换下拉箭头

Question

这是我用来隐藏和显示幻灯片切换效果的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(); 
     }); 
}); 

这将触发箭头，但有两个问题：

1. 向下箭头显示停留
2. 每个div都会切换每个箭头，因此当某个div启动并且一个div被关闭时，它们全都显示为down。

任何想法，将appriciated

Answer 1

jQuery(function($) { 
 

 
    $(".option-heading").click(function() { 
 
    $(this).next(".option-content").stop().slideToggle(500); 
 
    $(this).find(".arrow-up, .arrow-down").toggle(); 
 
    }); 
 

 
});

.option-heading{background:#ddd; cursor:pointer;} 
 
.option-content{background:#eee;} 
 

 
/* Notice this class ! */ 
 
.is-hidden{ display: none; }

<div class="option-heading"> 
 
    <span class="arrow-up is-hidden">&#9650;</span> 
 
    <span class="arrow-down">&#9660;</span> 
 
    HEADING 
 
</div> 
 
<div class="option-content is-hidden"> 
 
    content<br>content<br>content<br>content<br>content<br>content<br>content 
 
</div> 
 

 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Answer 2

使用类！

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); }