0

我正在使用 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/

4

2 回答 2

1

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

$(".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，并且每次单击导航切换时都会这样做。会推荐使用自己编程的画布菜单或使用类似 mmenu 的东西（http://mmenu.frebsite.nl/）

于 2016-02-26T08:47:03.453 回答
0

我所有的画布面板都基于“.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;
    }
});

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

<i class="fa fa-angle-double-left pull-right " aria-hidden="true" type="button" data-toggle="offcanvas" data-canvas="body" data-target="#navmenu"></i>
于 2017-03-09T11:30:54.013 回答