觸發mmenu中的關閉功能

我一直在嘗試創建一個按鈕，它在菜單打開和關閉時進行動畫處理。爲了做到這一點，我創建了一個簡單的功能，在點擊按鈕時執行API.open();和API.close();。代碼：觸發mmenu中的關閉功能

var API = $("#primary-menu").data("mmenu"), 
     menuOpen = 0; 

    $("#menu-button").click(function() { 
    if(menuOpen === 0){ 
     API.open(); 
     menuOpen = 1; 
    } 
    else{ 
     API.close(); 
     menuOpen = 0; 
    } 
    });

現在的問題是，當菜單通過點擊內容區域

$(".mm-opening #mm-0").click(function(){ 
    console.log("Click Successful"); 
    $("#menu-button").removeClass("close"); 
    });

使用的console.log方法和開發工具關閉按鈕不動畫，我發現了點擊內容區域時點擊並未完全註冊，因此我無法爲圖標設置動畫。

下面是演示：http://bwdmedia.in/camelport/vendor-panel/ 有人可以解釋這個原因嗎？或另一種方式來達到相同的結果。

來源

2015-09-07 VeeK

我認爲一個好的解決辦法是，如果有人可以經過'jquery.mmenu.min.js'文件，並找出其中究竟是位於代碼觸發打開和關閉的菜單。我經歷了它，但無法理解。 – VeeK

非常感謝GitHub社區，我找到了解決方案。

有一個div與ID #mm-blocker它可以防止與頁面的交互，所以我把它關閉display:none;和點擊現在可以通過JavaScript註冊。

來源

2015-10-08 14:37:00 VeeK

mmenu上的HTML標籤.mm-opened添加一個類時，菜單被觸發，並且當其接近刪除它，這樣你就可以設定一個時間間隔看，如果HTML標籤有此類

如果你使用JQuery，你可以做一些事情喜歡這個。

var thread = setInterval(checkHtmlTag(),20) 

    function checkHtmlTag(){ 
    var menuOpen; 

    if ($("html").hasClass("mm-opened")){ 
     menuOpen = true 
    } else{ 
     menuOpen = false 
     } 
    }

來源

2015-09-24 21:52:00

您可以通過以下超過以下

圖標提到

首先的步驟，頭部的動畫漢堡包圖標這個驚人的收藏得到補充動畫漢堡，下載CSS，並按照指示。你現在應該有HTML看起來像這樣：

<button id="my-icon" class="hamburger hamburger--collapse" type="button"> 
    <span class="hamburger-box"> 
     <span class="hamburger-inner"></span> 
    </span> 
</button>

如果你需要你的漢堡包圖標加以固定，嘗試在DIV包裝，並使用fixedElements附加。

<div class="Fixed"> 
    <button id="my-icon" class="hamburger hamburger--collapse" type="button"> 
     <span class="hamburger-box"> 
     <span class="hamburger-inner"></span> 
     </span> 
    </button> 
</div>

菜單

二（也是最後一次），創建菜單，並使用API來打開菜單，並以動畫圖標。添加一個小超時，以確保頁面的其餘部分完成動畫製作更流暢的動畫。

var $menu = $("#my-menu").mmenu({ 
    // options 
}); 
var $icon = $("#my-icon"); 
var API = $menu.data("mmenu"); 

$icon.on("click", function() { 
    API.open(); 
}); 

API.bind("open:finish", function() { 
    setTimeout(function() { 
     $icon.addClass("is-active"); 
    }, 100); 
}); 
API.bind("close:finish", function() { 
    setTimeout(function() { 
     $icon.removeClass("is-active"); 
    }, 100); 
});

http://mmenu.frebsite.nl/tutorials/animated-hamburger.html

來源

2017-08-20 19:15:43 thanikkal

觸發mmenu中的關閉功能

回答

相關問題