Question

我目前有一个bigSlide菜单很高兴在我的页面上工作，并希望合并另一个。文档没有说清楚这是否可行。我尝试过一些事无济于事。有没有人在一页上有两个bigSlide菜单？

用于第一个菜单的jQuery代码如下所示：

$(document).ready(function() {
    $('.menu-link').bigSlide({
        menu:      ('#menu'),
        push:      ('.push'),
        menuWidth: '30.6em',
        side:      'left',
        speed:     '300',
        state:      'closed',
        activeBtn:  'active',
        easyClose:  false,
    });
});

关联的HTML为：

<nav id='menu' class='panel' role='navigation'>
    <span>
        // stuff for the menu
    </span>
</nav>
<div class='wrap'>
    <a href="#menu" class="menu-link" id='arrow' ><image src="Images/rightBlackArrow.png"></a>
</div>

Answer 1

您已经拥有问题中的所有组件，可以使该解决方案有效。

首先，按如下所示添加第二个锚标记，并将href和class更改为唯一的名称，这使您可以在单击它们时专门针对它们。

<div class='wrap'>
    <a href="#menu" class="menu-link" id='arrow' ><image src="Images/rightBlackArrow.png"></a>
    <a href="#menu2" class="menu-link2" id='arrow' ><image src="Images/rightBlackArrow.png"></a>
</div>

完成后，您可以将脚本修改为以下内容；请务必按照上面的第二个锚标签修改您的课程和菜单。

$(document).ready(function() {
    $('.menu-link').bigSlide({
        menu:      ('#menu'),
        push:      ('.push'),
        menuWidth: '30.6em',
        side:      'left',
        speed:     '300',
        state:      'closed',
        activeBtn:  'active',
        easyClose:  false,
    });

    $('.menu-link2').bigSlide({
        menu:      ('#menu2'),
        push:      ('.push'),
        menuWidth: '30.6em',
        side:      'left',
        speed:     '300',
        state:      'closed',
        activeBtn:  'active',
        easyClose:  false,
    });
});

编辑：匆忙中，我忘记了一些表单元素。在这里，您将在第一个菜单旁边创建第二个菜单，以确保您引用正确的ID。

<nav id='menu' class='panel' role='navigation'>
    <span>
        // stuff for the menu
    </span>
</nav>
<nav id='menu2' class='panel' role='navigation'>
    <span>
        // stuff for the second menu
    </span>
</nav>

可以在一个页面上放置两个bigSlide菜单吗？

1 个答案: