2016-06-14 150 views
-1

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

 $(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 
    } 
    }); 
}); 
+0

您可以包括'html'的問題?你有沒有試過在相應的元素上調用'.click()'? – guest271314

+0

你的意思是這樣的? http://getbootstrap.com/javascript/#collapse-example-accordion – maraca

+0

不,我不能解釋爲 – user6462102

回答

0

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

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

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

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

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

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

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

0

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

,你可以嘗試:

$(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) 
    } 
} 
+0

我會試試這個謝謝 – user6462102