Javascript 将箭头返回到原始位置

我有一个

这是一个显示和隐藏多个切换div的切换。我目前设置为在打开div时向下切换箭头，但是一旦关闭div，箭头仍然保持在向下位置，我希望它返回到向右位置

 $(this).find('span').css('transform', 'rotate(0deg)');

全文

 $(document).ready(function () {
     // Toggles 1st Hidden Desktop Div
     $(".dtc-s").click(function () {
         $(".dtc-h").slideToggle(500);
         $(".dtc-two-h, dtc-three-h").hide(500);
         $(this).find('span').css('transform', 'rotate(90deg)');
     });
     // Toggles 2nd Hidden Desktop Div
     $(".dtc-two-s").click(function () {
         $(".dtc-two-h").slideToggle(500);
         $(".dtc-three-h, .dtc-h").hide(500);
         $(this).find('span').css('transform', 'rotate(90deg)');
     });
     // Toggles 3rd Hidden Desktop Div
     $(".dtc-three-s").click(function () {
         $(".dtc-three-h").slideToggle(500);
         $(".dtc-two-h, .dtc-h").hide(500);
         $(this).find('span').css('transform', 'rotate(90deg)');
     });
     // #1
     if ($('.dtc-one').is(':visible')) $(this).next().slideDown();
     $(this).find('span').css('transform', 'rotate(0deg)');
     // #2
     if ($('.dtc-two').is(':visible')) $(this).next().slideDown();
      $(this).find('span').css('transform', 'rotate(0deg)');
     // #3
     if ($('.dtc-three').is(':visible')) $(this).next().slideDown();
      $(this).find('span').css('transform', 'rotate(0deg)');
 });

---

尝试在click函数中添加：visible复选框。像这样：

 $(".dtc-s").click(function () {
     if($(".dtc-h").is(":visible"))
         $(this).find('span').css('transform', 'rotate(0deg)');
     else
         $(this).find('span').css('transform', 'rotate(90deg)');
     $(".dtc-h").slideToggle(500);
     $(".dtc-two-h").hide(500);
     $(".dtc-three-h").hide(500);
 });

---

Fiddle：（我只为第一个箭头做过）

如果用户单击同一个切换，这很好，但是，我希望有一个选项，当用户单击另一个切换时，它会将先前关闭的切换的箭头返回到其右侧位置。您是一位绅士和学者。谢谢，已接受。假设他们单击相同的切换。我注意到箭头处于向下位置，除非单击另一个箭头？我试了一下，但两个开关都失灵了。有什么想法？很抱歉。。代码有一些问题。在这里修复了它们：