第二个引导程序 jasny offcanvas 推送菜单答案

【问题标题】：Second bootstrap jasny offcanvas push menu第二个引导程序 jasny offcanvas 推送菜单
【发布时间】：2016-02-25 14:44:31
【问题描述】：

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

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

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

任何帮助将不胜感激。提前致谢！

<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/

【问题讨论】：

能否将完整代码添加到 bootply.com 或 jsfiddle.net？
刚刚发布了 jsfiddle 的链接。感谢您的调查！

标签： twitter-bootstrap jasny-bootstrap off-canvas-menu

【解决方案1】：

我删除了“数据切换”并完全使用 jScript-initiation：

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

如果您单击具有类 .navbar-toggle 的链接并将当前的“data-target”属性获取到变量“target”，则会触发该事件。之后它会隐藏画布 - 仅在打开画布的情况下，然后显示目标画布。

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

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

【讨论】：

非常感谢达斯汀。是的，我想定制的解决方案值得考虑。但这不会是我不存在的 JS 技能 :) 你的解决方案在某处有一个小缺陷。当您第一次单击按钮 1 并随后单击按钮 2 时，按钮 2 只会关闭第一个菜单但不显示菜单 2。但是这里更大的问题是它不再是推送菜单。
你是对的。根本没有意识到推动效应。让我看看它，以及第一次点击错误。

【解决方案2】：

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

$("[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>

【讨论】：