jquery切換打開和關閉2格

Question

我有以下代碼來打開和關閉兩個單獨的div的工作正常。然而，我試圖實現的是，如果一個潛水是開放的，我點擊打開另一個打開的關閉，反之亦然。有人能指引我走向正確的方向嗎？

 $(document).ready(function(e) { 
     var menuopen = false; 
     $("#searching").click(function(e) { 
     if (menuopen == false) { 
     $("#search").animate({ 
     top: "111px" 
      }, 1000) 
    menuopen = true; 
    } 
    else if (menuopen == true) { 
    $("#search").animate({ 
    top: "-110px" 
    }, 1000) 
    menuopen = false 
    } 
}); 
    $("#navigation").click(function(e) { 
    if (menuopen == false) { 
    $("#menu").animate({ 
    top: "111px" 
    }, 1000) 
    menuopen = true; 
    } 
    else if (menuopen == true) { 
    $("#menu").animate({ 
     top: "-410px" 
    }, 1000) 
    menuopen = false 
    } 
    }); 
}); 

Answer 1

這裏有一個概念，它是如何工作的，也爲雙擊等：

1. 在打電話之前，動畫設置指示動畫正在進行的標誌。

2. 如果設置了此標誌，則立即返回並且不要調用動畫。

3. 向重置標誌的動畫調用添加回調函數（例如完成），以便菜單再次變爲負責。

4. 以某種方式跟蹤菜單的狀態（變量或類指示按照需要進行造型時的狀態），以便您知道哪一個必須關閉或打開。

因此，您可以創建一個函數menuSelected並從所有菜單點擊函數中調用它。

您可以切換每次點擊，當點擊一個菜單時也點擊另一個點擊，但這很危險，例如，如果您立即進行多次點擊，則事件可能會疊加，您將看到菜單打開並關閉數次。

Answer 2

你想«觸發»兩個工作動畫......在此基礎上

，你可以嘗試：

$(document).ready(function(e) { 
    $("#searching").click(function(e) { 
     searchOpen(true); 
     menuOpen(false); 
    }); 
    $("#navigation").click(function(e) { 
     searchOpen(false); 
     menuOpen(true); 
    }); 
}); 

function searchOpen(logic){ 
    if (logic) { 
     $("#search").animate({ 
      top: "111px" 
     }, 1000) 
    } 
    else { 
     $("#search").animate({ 
      top: "-110px" 
     }, 1000) 
    } 
} 

function menuOpen(logic){ 
    if (logic) { 
     $("#menu").animate({ 
      top: "111px" 
     }, 1000) 
    } 
    else { 
     $("#menu").animate({ 
      top: "-410px" 
     }, 1000) 
    } 
}