多箭头切换箭头切换

Question

嗨，这是一个两个在一个问题。我有以下的小提琴：

Fiddle

我想使它这样的箭头进入一个向下的位置时，菜单切换打开，然后有箭头回到向上的位置时，菜单关闭。我也想这样做，以便当另一个“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)'); {} 
}); 

Answer 1

"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 

Answer 2

我想你想是这样的

Js Fiddle

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

Answer 3

  $(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', ''); 
}