触发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中的关闭功能

回答

相关问题