Question

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

Answer 1

我删除了＆＃34;数据切换＆＃34;并完全使用jScript-initiation：

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

如果您点击类.navbar-toggle的链接并且获取当前＆＃34;数据目标＆＃34;该事件将触发属性为变量＆＃34; target＆＃34;。之后它隐藏了offcanvas - 只是打开了一个，然后它显示了目标。

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

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

的内容

Answer 2

我的所有offcanvas面板都基于'.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>

第二个bootstrap jasny offcanvas推送菜单

2 个答案: