jquery - 在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

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

图标

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