javascript - slideout.js 左右滑出菜单

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();
});