jQuery菜單管理（功能） - 開放和關閉

Question

我有一個jQuery支持的CSS3菜單系統，我從這裏得到（http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/）我使用這個令人印象深刻的菜單作爲我的網站導航的一部分，但是我遇到了問題，我想顯示多個這些菜單，因爲我有很多鏈接。

jQuery代碼如下所示（請注意，我用兩個菜單沒有一個＃DL-MENU2表現）

 <script> 
     $(function() { 
      $('#dl-menu').dlmenu({ 
       animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
      }); 
        $('#dl-menu2').dlmenu({ 
       animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
      }); 
     }); 
    </script> 

我的問題是如何讓一個菜單1時關閉菜單2打開？在你點擊菜單1的時候，菜單打開，但當你點擊菜單2時不會關閉。

Answer 1

dlmenu代碼很有趣，一旦初始化，你可以再次調用一個字符串來執行函數。因此，你可以在index.html從Git倉庫（here）改爲通過改變$(function(){...}自動打開菜單：

$(function() { 
    $('#dl-menu').dlmenu(); 
    $('#dl-menu').dlmenu("openMenu"); 
}); 

你也可以用上面的關閉菜單。但是我找不到任何機制來將偵聽器添加到dlmenu代碼中。

所以最好的解決辦法是增加你自己的，並利用以下內容：

$('#dl-menu').dlmenu("closeMenu"); 

的'#dl-menu'是你的菜單div的ID的引用，因此您可以指定要由收任何菜單ID。

棘手的部分是當點擊另一個菜單時觸發監聽器。這很複雜，因爲菜單打開時，dlmenu中的邏輯清除並設置$（body）的點擊。最簡單的方法是向按鈕添加一個ID。在index.html目前的邏輯是：

<button class="dl-trigger">Open Menu</button> 

它沒有ID，以便添加一個已定義的每個菜單：

<button id="dl-menu1-button" class="dl-trigger">Open Menu</button> 

然後你可以改變$(function() {...}做以下（假設你已經添加另一個菜單，改變了的ID，這樣你有dl-menu1和dl-menu2）：

$(function() { 
    $('#dl-menu1').dlmenu(); 
    $('#dl-menu2').dlmenu(); 

    $('#dl-menu1-button').on("click", function() { 
     $('#dl-menu2').dlmenu("closeMenu"); 
    }); 
    $('#dl-menu2-button').on("click", function() { 
     $('#dl-menu1').dlmenu("closeMenu"); 
    }); 
}); 

我已經getti測試以上克隆git倉庫的副本，添加id並像上面那樣更改init。按照你的要求工作。