Question

我正在使用Bootstrap的 navmenu 功能。最近我意识到我需要第二个。因为我正在使用滑入式方法（其中navmenu的z-index设置为1，画布为2），添加第二个滑块会产生一个遮挡另一个滑块的问题。我突然想到将第二个滑块放在右侧，但似乎效果不佳...... Bootstrap在打开它时表现出一些时髦的行为......

所以我的问题：多个navmenus是如何实现的？我有一个包含多个div的单个navmenu，我必须隐藏/显示？或者我是否需要隐藏/显示多个navmenus？

编辑我

作为推论，有没有办法让自己陷入引导程序提供的动画？我可以在nabvar项目上设置点击处理程序，打开/关闭导航菜单以显示/隐藏正确的内容，但它独立于滑动执行，以便首先滑动然后显示。我想做的是链接到幻灯片上，使其在幻灯片之前显示并在幻灯片之后隐藏

编辑II

啊。另一个提到：我正在使用 jasny-bootstrap 插件

Answer 1

查看Jasny的源代码我发现可以挂钩显示/隐藏过程的开始/结束：

$('.navmenu')
    .on('show.bs.offcanvas', function() {
        $(this).show();
    })
    .on('hidden.bs.offcanvas', function() {
        $(this).hide();
    });

当然，还有其他活动：shown.bs.offcanvas和hide.bs.offcanvas

编辑我

经过多次努力，上面没有成功，所以我最终将各种各样的页面放在一个滑块中：

<div id="slider">
    <div id="page1">
    </div>
    <div id="page2">
    </div>
</div>

在转发器中添加额外参数：

<a class="nav-toggle"
    data-toggle="offcanvas"
    data-recalc="false"
    data-target="#slider"
    data-canvas="#canvas"
    data-page="#page1"
></a>

并在点击事件中处理它：

$('.nav-toggle').click(function(e) {
    var sld = $(this).data('target');
    var page = $(this).data('page');
    if (sld.hasClass('in') && !sld.find(page).is(':visible')) {
        e.preventDefault();
        e.stopPropagation();
    }   
    sld.find('> *').hide();
    sld.find(page).show();
});

如何实现多个navmenus？

1 个答案: