JQuery添加/刪除類問題

Question

構建基於CSS類的簡單Multilevel推式菜單，它沒有JavaScript動畫，並在CSS轉換/轉換上運行。除了切換is-open類以外，它在每個部分都可以正常工作。

1. 當用戶點擊一個鏈接時，它應該首先刪除.is-open類。然後添加它，以便動畫激活。

2. 如果我說第二階段將.is-open類改爲.addClass("foo");，那麼除去.is-open類並添加.foo類沒有任何問題。所以我想知道這段代碼有什麼問題。

您可以在這裏找到http://jsbin.com/EjUQ/2/

在演示代碼，你會發現菜單沒有submenu負荷罷了。這是正確的行爲。我遇到的問題是，我希望菜單在打開新菜單之前關閉。因此刪除.is-open類然後再次應用它。

e.g

鏈接1，4,7不會對click/touch子菜單中的那麼開放什麼，點擊菜單按鈕會提示沒有發生。這是正確的行爲。

鏈接2,3,5,6有子菜單，因此它在點擊/觸摸時打開，菜單按鈕將切換菜單以打開/關閉。

希望有人能指點我做錯的方向。謝謝。

Answer 1

您應該利用transitionend事件。以便在將「is-open」類添加回側邊欄和內容之前，您要完成動畫的完成。例如：

sidebar.one('transitionend', function() { 
    sidebar.addClass("is-open"); 
    content.addClass("is-open"); 
}); 

現在，我這裏是不完美的，但我相信它傳達的理念：http://jsbin.com/EjUQ/9