更高級的jQuery切換腳本

Question

我有一個主導航按鈕，稍微向下移動懸停時，然後再次懸停。點擊這個按鈕後會釋放一個包含許多HTML的下拉div，再次點擊後，顯然該框會恢復。然而，其他按鈕在頁面上有下拉菜單，他們需要彼此避開，所以每個按鈕也會關閉其他每個下拉框。現在即時通過切換方式進行切換，如果您用另一個按鈕關閉該方框，則必須點擊兩次才能在主按鈕上再次下拉下拉菜單。

切換是有效的，但用if語句做切換式jQuery動畫的有效方法是什麼？所以像點擊動畫一樣，動畫或其他動畫。我基本上不知道如何寫入if部分。我已經看到了類似的東西，如果實例（：動畫）但那是說，如果有任何一般animation.I有很多情況下，我想申請這，所以我必須是具體的，如：

if(:animation).top = 150{ (div).animate(top = 0)} else {(div).animate(top = 150)}

此外，當您翻轉並且頂部按鈕向下移動一點時，如果下拉菜單關閉並且在下拉菜單返回時恢復原樣，該如何保持關閉狀態？

這裏是一個jsfiddle，所以你可以看到我即將談論更容易。它不完美，但我的主頁看起來很相似，讓我知道如果我對任何部分感到困惑，我會編輯它！

http://jsfiddle.net/9DN52/1/

Answer 1

在我看來你的代碼是efficent足夠，所以你需要做的只是增加一個類來看看它的點擊比它停止懸停的行動是什麼。

的jQuery：

$("#down").hover(
    function() { 
     $(this).stop().animate({top:0},200); 
    }, 
    function() { 
     // this will alert the situation for you to understand 
     alert($(this).hasClass("isDown")); 
     // if its clicked than do not move! 
     if ($(this).hasClass("isDown") == false) { 
      $(this).stop().animate({top:-5},220); 
     } 
    } 
); 

$("#down").click(
    function() { 
     $("#DropUp").stop().animate({bottom:-250},220); 
     // Add a class to see if its clicked 
     $(this).toggleClass("isDown"); 
    } 
); 

工作圍繞你的提琴：http://jsfiddle.net/9DN52/14/

編輯：

我也解決了幾個錯誤，做了一些代碼修復，補充說明，我以爲你其實想要做的是這樣的：

jQuery：

// Actually you can do this with css transition 
// Remove these descriptions for a cleaner looking code 
$("#down").hover(
    function() { $(this).stop().animate({top:0},200); }, 
    function() { 
     // if its clicked than do not move! 
     if ($(this).hasClass("isDown") == false) { 
      $(this).stop().animate({top:-5},220); 
     } 
    } 
); 
// Instead of toggle simple click action is enough 
$("#down").click(function() { 
    // Thanks to class selector now we know 
    // if its clicked or down, so we know what to do.. 
    if ($("#down").hasClass("isDown") == false) { 
     $("#DropDown").stop().animate({top:0},250); 
     // if footer is up already this will hide it 
     $("#DropUp").stop().animate({bottom:-250},220); 
     $("#up").removeClass("isUp"); 
    } else { 
     $("#DropDown").stop().animate({top:-250},220); 
    } 
    // Each click should change the down situation 
    $("#down").toggleClass("isDown"); 
}); 
// Instead of toggle simple click action is enough 
$("#up").click(function() { 
    // If its up already 
    if ($(this).hasClass("isUp") == false) { 
     $("#DropUp").stop().animate({bottom:0},250); 
     // if header is down already this will hide it 
     $("#DropDown").stop().animate({top:-250},220); 
     $("#down").stop().animate({top:-5},220).removeClass("isDown"); 
    } else { 
     $("#DropUp").stop().animate({bottom:-250},220); 
    } 
    // Each click should change the up situation 
    $("#up").toggleClass("isUp"); 
}); 

小提琴：http://jsfiddle.net/9DN52/43/