第二個引導程序Jasny Offcanvas推菜單

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

我刪除了“數據切換”並完全使用了jScript-initiation：

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

如果您單擊帶有類.navbar-toggle的鏈接並將當前的“數據目標”屬性獲取到變量“目標”，則會觸發該事件。 之后，它隱藏了畫布-僅針對打開的情況，然后顯示了目標畫布。

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

但是我不建議您使用jasny-offcanvas，因為每次您打開offcanvas菜單時，jasny都會在源代碼中添加另一個clone-div，並且每次在nav-toggle上單擊都會這樣做。 會建議使用自己編程的offcanvas菜單，或者選擇mmenu（ http://mmenu.frebsite.nl/ ）之類的東西

Answer 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;
    }
});

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>