Question

我使用slideout.js创建汉堡包菜单。我创建了左侧菜单，但我无法找到如何创建正确的菜单。

我用于左边的代码是：

var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
});
document.querySelector('.js-slideout-toggle').addEventListener('click', function () {
    slideout.toggle();
});

与正确的唯一区别是添加'side': 'right'

在API中，它表示您可以使用slideout.destroy();清理实例，以便可以在同一区域创建另一个幻灯片。但我不确定如何在新代码中实现这一点。

对于正确的幻灯片，我这样做了：

var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('shop'),
    'padding': 256,
    'tolerance': 70,
    'side': 'right'
});
document.querySelector('.js-slideout-toggle-right').addEventListener('click', function () {
    slideout.toggle();
});

但这不起作用。点击.js-slideout-toggle-right按钮后，它就不会在右侧打开。单击.js-slideout-toggle打开左侧菜单后，右侧菜单打开，左侧菜单打开。有什么想法吗？

Answer 1

当你需要两个时，你只有一个变量，所以它搞砸了一点。

您只需指定它是slideoutRight还是slideoutLeft，就在这里：

var slideoutLeft = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
});
document.querySelector('.js-slideout-toggle').addEventListener('click', function () {
    slideoutLeft.toggle();
});


var slideoutRight = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('shop'),
    'padding': 256,
    'tolerance': 70,
    'side': 'right'
});
document.querySelector('.js-slideout-toggle-right').addEventListener('click', function () {
    slideoutRight.toggle();
});

使用slideout.js向左和向右滑出菜单

1 个答案: