第二个 bootstrap jasny offcanvas 推送菜单

Question

我正在使用 Bootstrap Jasny offcanvas 推送导航，如下所示：http://www.jasny.net/bootstrap/examples/navmenu-push/

现在，我想要一个额外的画布导航，但我不知道如何去做，因为我的 JS 知识为零。

我只设法创建了第二个导航并添加了第二个 opens/closes 第二个导航的切换按钮。但是，它在打开时不会关闭第一个（反之亦然）。理想情况下，它会先完全关闭第一个导航，然后再打开第二个。

如有任何帮助，我们将不胜感激。提前致谢！

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
 <a class="navmenu-brand" href="#">Navigation1</a>
 <ul class="nav navmenu-nav">
  <li>stuff</a></li>
 </ul>
</div>
<div class="navmenu2 navmenu-default navmenu-fixed-left offcanvas">
 <a class="navmenu-brand" href="#">Navigation2</a>
 <ul class="nav navmenu-nav">
  <li><a href="../navmenu/">more stuff</a></li>
  </ul>
</div>

<div class="navbar navbar-default navbar-fixed-top">
 <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
  navibutton1
 </button>
 <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu2" data-canvas="body">
  navibutton2
 </button>
</div>

https://jsfiddle.net/L2evyhuL/1/

Answer 1

我删除了 "data-toggle" 并完全使用 jScript 启动：

$(".navbar-toggle").click(function(){
    var target = $(this).attr("data-target");
    $(".navmenu, .navmenu2").offcanvas('hide');
    $(""+target+"").offcanvas('show');
});

如果您使用 class .navbar-toggle 单击 link 并将当前 "data-target" 属性获取到变量 "target"，则会触发该事件。之后它隐藏了 offcanvas - 只是为了打开一个的情况，然后它显示了目标那个。

工作示例：https://jsfiddle.net/jarkz3mz/

但我不建议使用 jasny-offcanvas，因为每次打开 offcanvas 菜单时，jasny 都会在源代码中添加另一个克隆-div，并且每次点击导航开关时都会这样做。会推荐使用自己编程的 offcanvas 菜单或使用 mmenu (http://mmenu.frebsite.nl/)

之类的东西

Answer 2

我所有的非画布面板都基于“.navmenu”class。我制作了这个通用脚本，它将关闭所有打开的面板，并在隐藏打开的面板后立即打开目标面板。这样我可以有多个面板，但只能打开一个。

$("[data-toggle='offcanvas']").on("click", function (e) {
    var target = $(this).data('target');
    var target_canvas = $(this).data('canvas');
    var items = $(".navmenu:not(" + target + "):visible");
    if (items.length > 0) {
        $.each(items, function (index, value) {
            $(value).on('hidden.bs.offcanvas', function () {
                $(this).unbind('hidden.bs.offcanvas');
                $(target).offcanvas({ canvas: target_canvas });
                $(target).offcanvas('show');
            });
            $(value).offcanvas('hide');
        });
        e.preventDefault();
        return false;
    }
});

点击事件用于切换面板的元素。例如：

<i class="fa fa-angle-double-left pull-right " aria-hidden="true" type="button" data-toggle="offcanvas" data-canvas="body" data-target="#navmenu"></i>

第二个 bootstrap jasny offcanvas 推送菜单

Second bootstrap jasny offcanvas push menu

twitter-bootstrap

jasny-bootstrap

off-canvas-menu