箭头切换为关闭

Question

这是一个多步骤的过程(在帮助下)，但最终脚本达到了一个好的点，然而，还有最后一个我遇到的花边新闻。

FIDDLE

本质上，这个小提琴是在打开和关闭时的多个切换。然而，添加的功能是，当切换打开时，箭头从向右位置切换到向下位置。此外，当切换另一个时，它会关闭上一个切换，并将箭头返回到其原始位置。然而，在箭头#2和#3上，如果单击切换关闭，但箭头仍然处于向下位置，如果我选择当前打开的切换，我如何使其回到右侧位置，因为并不是所有用户都会单击另一个切换。

 $(document).ready(function () {
     function arrowToggle(that, cName) {
         $(".dtc-one-s, .dtc-two-s, .dtc-three-s").find('span').css('transform', 'rotate(0deg)');

         if($(cName+"-h").is(":visible"))
             $(that).find('span').css('transform', 'rotate(0deg)');
         else
             $(that).find('span').css('transform', 'rotate(90deg)');
     }

     // Toggles 1st Hidden Desktop Div
     $(".dtc-s").click(function () {
         arrowToggle(this, ".dtc-one");
         $(".dtc-h").slideToggle(500);
         $(".dtc-two-h").hide(500);
         $(".dtc-three-h").hide(500);
     });
     // Toggles 2nd Hidden Desktop Div
     $(".dtc-two-s").click(function () {
         arrowToggle(this, ".dtc-one");
         $(".dtc-two-h").slideToggle(500);
         $(".dtc-h").hide(500);
         $(".dtc-three-h").hide(500);
         $(this).find('span').css('transform', 'rotate(90deg)');
     });
     // Toggles 3rd Hidden Desktop Div
     $(".dtc-three-s").click(function () {
         arrowToggle(this, ".dtc-one");
         $(".dtc-three-h").slideToggle(500);
         $(".dtc-two-h").hide(500);
         $(".dtc-h").hide(500);
         $(this).find('span').css('transform', 'rotate(90deg)');
     });
 });

Answer 1

从第二个和第三个click函数中删除此行：

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

这条线将箭头旋转回90度，这是您试图避免的。

同样，在这两个函数中，在arrowToggle函数中引用它们的类，而不是在.dtc-one函数中引用它们的类

 $(".dtc-two-s").click(function () {
   arrowToggle(this, ".dtc-two");
   ...
 });

 $(".dtc-three-s").click(function () {
     arrowToggle(this, ".dtc-three");
   ...
 });

上的小提琴