Question

<ons-sliding-menu var="slidingMenu" main-page="index.html" menu-page="menu.html" max-slide-distance="200px" type="overlay" side="left" swipable ="true"></ons-sliding-menu>

我的滑动菜单结构如上。单击按钮时，幻灯片菜单工作正常，如打开和关闭。

但我的问题是，需要在点击菜单外部或点击主页（index.html）时关闭滑动菜单

我想知道，是否有可用的选项或任何可用的解决方法。

提前致谢

Answer 1

是的，点击外面关闭菜单会更好。

您可以使用滑动菜单的'postopen'事件将点击处理程序附加到主页面。在点击处理程序中，您可以调用slidingMenu.close()。删除点击处理程序也很重要，否则您无法再次打开菜单。

代码：

ons.ready(function() {
  slidingMenu.on('postopen', function() {
    var main = slidingMenu._element[0].
      querySelector('.onsen-sliding-menu__above').children[0],
        el = angular.element(main);

    el.on('click', function() {
      slidingMenu.close();
      el.off('click');
    })
  });
});

以下笔显示了如何使用它： http://codepen.io/argelius/pen/jENKeX

由于这是一个不错的行为，我认为它将在下一个版本中添加。

此致

单击主页上关闭ons-滑动菜单

1 个答案: