多箭頭切換箭頭切換

嗨，這是一個兩個在一個問題。我有以下的小提琴：多箭頭切換箭頭切換

我想使它這樣的箭頭進入一個向下的位置時，菜單切換打開，然後有箭頭回到向上的位置時，菜單關閉。我也想這樣做，以便當另一個「Click Me」被點擊時，如果另一個打開它關閉前一個。手風琴風格的菜單比較容易，但它有多個開放和封閉的div。思考？

$(document).ready(function() { 
    // Toggles 1st Hidden Desktop Div 
    $(".dtc-s").click(function() { 
     $(".dtc-h").slideToggle(500); 
     $(".dtc-h").find('span').css('transform', 'rotate(90deg)'); 
    }); 
    // Toggles 2nd Hidden Desktop Div 
    $(".dtc-two-s").click(function() { 
     $(".dtc-two-h").slideToggle(500); 
     $(".dtc-two-h").find('span').css('transform', 'rotate(90deg)'); 
    }); 
    // Toggles 3rd Hidden Desktop Div 
    $(".dtc-three-s").click(function() { 
     $(".dtc-three-h").slideToggle(500); 
     $(".dtc-three-h").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)'); {} 
});

來源

2014-09-29 test tester

"I would like it also so that when another "Click Me" is clicked if another is open it closes the previous"

對於這個部分，你可以隱藏在點擊其他2周的div像這樣

$(".dtc-s").click(function() { 
    $(".dtc-h").slideToggle(500); 
    $(".dtc-two-h").hide(500); 
    $(".dtc-three-h").hide(500); 
});

fiddle here

還在尋找你的第一個問題

編輯：

關於第一個問題改變這一行

$（「DTC-H」） .find（ '跨度'）。CSS（ '改造'， '旋轉（90度）'） ;

這個

$（本） .find（ '跨'）的CSS（ '改造'， '旋轉（90度）'）。

，如果你想箭頭返回到其正確的位置，你可能需要包括一個標誌或添加/刪除.rotation類元素

EDIT2：「如果有一種方法一次一個新的「Click Me」被切換，那個先前打開的切換鍵的箭頭能夠返回到它的右邊位置嗎？「 fiddle here

的想法：

 $(".dtc-two-s").find('span').removeClass('transform'); //not clicked => remove rotation 
    $(".dtc-three-s").find('span').removeClass('transform'); //not clicked => remove rotation 
    $(this).find('span').toggleClass('transform'); //clicked => add rotation

來源

2014-09-29 09:07:56 Alexandros

這個偉大的工程，但我想知道如果有一種方法一次一個新的「Click Me」被切換，該先前打開的切換鍵的箭頭可以返回到其右側位置？目前，即使打開新的切換鍵，它仍處於下降位置。 – 2014-09-29 15:29:31

是的，只要做removeClass（「transform」）;在另外兩個divs上，更新了小提琴的答案，對於遲到的回覆抱歉 – Alexandros 2014-09-30 06:26:21

我想你想是這樣的

Js Fiddle

$(this).find('span').toggleClass('transform');

來源

2014-09-29 09:17:37

  $(document).ready(function() { 
     // Toggles 1st Hidden Desktop Div 
     $(".dtc-s").click(function() { 
      $(".dtc-h").slideToggle(500,function(){checkAll();}); 
      $(".dtc-two-h").hide(500,function(){checkAll();}); 
      $(".dtc-three-h").hide(500,function(){checkAll();}); 
      $(".dtc-s").find('span').css('transform', 'rotate(90deg)'); 

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

    if ($('.dtc-two').css('display') == 'none') 
    $('.dtc-two-s').find('span').css('transform', ''); 

    if ($('.dtc-three').css('display') == 'none') 
    $('.dtc-three-s').find('span').css('transform', ''); 
}

來源

2014-09-29 09:36:44 AbedElraheem

多箭頭切換箭頭切換

回答

相關問題