箭頭切換關閉

這是一個多步驟的過程（有幫助），但最後腳本到了一個很好的點，但是，有一個我已經跑到最後的花絮。箭頭切換關閉

從本質上講，這是小提琴是多重切換時打開和關閉。但是，增加的功能是，當切換打開時，箭頭從右側位置切換到下側位置。另外，當另一個切換時，它關閉前一個切換並將箭頭返回到其原始位置。然而，如果點擊箭頭＃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)'); 
    }); 
});

來源

2014-09-29 test tester

從第二和第三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/

來源

2014-09-29 21:23:37

箭頭切換關閉

回答

相關問題