Question

这是一个多步骤的过程（有了帮助），但最后脚本到了一个好点，但是，我还有一个最后的故事。

基本上，这个小提琴是打开和关闭时的多个切换。但是，增加的功能是当切换打开时箭头从向右位置切换到向下位置。此外，当切换另一个切换时，它会关闭前一个切换并将箭头返回到其原始位置。但是，如果单击箭头＃2和＃3，则切换关闭，但箭头保持向下位置，如果我选择当前打开的切换，如何不是所有用户都会单击另一个切换，如何将其恢复到右侧位置。 / p>

 $(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

从第2和第3 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");
   ...
 });

小提琴 http://jsfiddle.net/o3pyLsug/

箭头切换onclose

1 个答案: