在 mmenu 中触发一个关闭函数

Question

我一直在尝试创建一个按钮，该按钮会在菜单打开和关闭时进行动画处理。为此，我创建了一个简单的函数来在单击按钮时执行 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/ 有人可以解释这是为什么吗？或者用其他方法达到同样的效果。

Answer 1

mmenu 在触发菜单时在 html 标签 .mm-opened 上添加一个 class 并在菜单关闭时将其删除，因此您可以设置一个时间间隔来观看 html标签有这个 class

如果您正在使用 JQuery，您可以这样做。

var thread = setInterval(checkHtmlTag(),20)

    function checkHtmlTag (){
     var menuOpen;

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

Answer 2

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

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

Answer 3

您可以按照以下步骤添加动画汉堡包

图标

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

在 mmenu 中触发一个关闭函数

Trigger a closing function in mmenu

jquery

mmenu