在 mmenu 中触发关闭功能答案

【问题标题】：Trigger a closing function in mmenu在 mmenu 中触发关闭功能
【发布时间】：2015-12-02 20:10:13
【问题描述】：

我一直在尝试创建一个在菜单打开和关闭时动画的按钮。为此，我创建了一个简单的函数来在单击按钮时执行API.open(); 和API.close();。代码：

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/ 有人可以解释这个原因吗？或者其他方式来达到同样的效果。

【问题讨论】：

我认为一个好的解决方案是如果有人可以通过jquery.mmenu.min.js 文件并找出触发菜单打开和关闭的代码的确切位置。我经历了它，但无法理解。

标签： jquery mmenu

【解决方案1】：

您可以按照下面提到的步骤添加动画汉堡包

图标

首先，前往这个令人惊叹的动画汉堡图标集合，下载 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

【讨论】：

【解决方案2】：

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
       }
    }

【讨论】：

【解决方案3】：

感谢 GitHub 社区，我找到了解决方案。

有一个 ID 为 #mm-blocker 的 div 阻止与页面的交互，所以我用 display:none; 将其关闭，现在可以通过 javascript 注册点击。

【讨论】：