slideIn / Out菜单问题

时间:2016-10-18 11:54:47

标签: javascript jquery html css

我一直在处理这个菜单插件,它的工作正常,但是我注意到有一个问题,请看这个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');
  });
});

1 个答案:

答案 0 :(得分:3)

您要做的是保留对菜单的引用,以便您可以在活动中关闭它。

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

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

在你的活动中你可以这样关闭:

menuItem._resetMenu();

不要尝试使用DOM手动关闭它,这意味着你的偶数功能会变成这样:

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

在其他地方调用mlPushMenu对象上的其他方法也很有帮助。在上面的例子中; menuItem是您的参考。