2014-09-29 26 views
0

我有一个FIDDLE返回箭头回到原先的位置

这是一个切换,显示和隐藏多重切换的div。我现在设置为在div打开时也切换向下箭头,但是一旦div关闭,箭头仍然停留在向下位置,我希望它返回到右侧位置。

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

完整剧本

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

请HTML代码 – AvrilAlejandro 2014-09-29 16:37:14

回答

0

尝试添加:点击函数内部目视检查。像这样:

$(".dtc-s").click(function() { 
    if($(".dtc-h").is(":visible")) 
     $(this).find('span').css('transform', 'rotate(0deg)'); 
    else 
     $(this).find('span').css('transform', 'rotate(90deg)'); 
    $(".dtc-h").slideToggle(500); 
    $(".dtc-two-h").hide(500); 
    $(".dtc-three-h").hide(500); 
}); 

小提琴:http://jsfiddle.net/59kz17d9/1/(我已经做到了只对第一个箭头)

+0

这是一件好事,如果用户点击一个相同的切换,但是,我希望有可以选择当用户点击另一个切换时,它将先前关闭的切换的箭头返回到其右侧位置。 – 2014-09-29 16:47:46

+0

这是你在找什么? - > http://jsfiddle.net/59kz17d9/2/ – Amit 2014-09-29 16:55:45

+0

你是一个绅士和学者。谢谢,接受。 – 2014-09-29 17:00:55