javascript - 滑入/滑出菜单问题

Question

我一直在研究这个菜单插件，它工作正常，但是我注意到一个问题，请看这个 JSFiddle Demo

当菜单打开时，我在菜单的右上角添加了一个关闭按钮(x)，当我点击关闭时它向左滑动并隐藏但是当我再次点击菜单时它没有打开但是如果你再次点击它完美无缺。

有人可以指导如何使我的自定义关闭图标完美工作，就像在外部菜单点击时一样吗？

我发现在关闭时，它删除了一个类并添加了 translate3D 的内联 css，我在我的 jquery 中做了同样的事情，但没有成功

这是我关闭的 jQuery 函数

$(document).ready(function(){
  $('.nav-close').click(function(){
    $("#mp-pusher").removeClass('mp-pushed').css("transform","translate3d(0px, 0px, 0px)");
    $(".mp-level").removeClass('mp-level-open');
  });
});

Answer 1

您要做的是保留对菜单的引用，以便您可以在事件中关闭它。

https://jsfiddle.net/ps855n8r/14/

var menuItem = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

在您的事件中，您可以这样结束:

menuItem._resetMenu();

不要尝试使用 DOM 手动关闭它，这意味着您的 even 函数会变成这样:

$(document).ready(function(){
    $('.nav-close').click(function(el){
        menuItem._resetMenu();
    });
  });

也有助于在别处调用 mlPushMenu 对象的其他方法。在上面的例子中； menuItem 是您的引用。