0

Bootstrap Jasny offcanvas プッシュ ナビゲーションを次のように使用しています: http://www.jasny.net/bootstrap/examples/navmenu-push/

今、オフキャンバス ナビゲーションを追加したいのですが、JS の知識がまったくないため、どうすればよいかわかりません。

2 番目のナビゲーションを作成し、2 番目のナビゲーションを開閉する 2 番目のトグル ボタンを追加するだけです。ただし、開いているときに最初のものを閉じません（逆も同様です）。理想的には、まず最初のナビゲーションを完全に閉じてから、2 番目のナビゲーションを開きます。

どんな助けでも大歓迎です。前もって感謝します！

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

ただし、offcanvas メニューを開くたびに jasny-offcanvas を使用することはお勧めしません。jasny はソース コードに別の clone-div を追加し、nav-toggle をクリックするたびに追加します。独自にプログラムされたオフキャンバス メニューを使用するか、mmenu ( http://mmenu.frebsite.nl/ )のようなものを使用することをお勧めします。

于 2016-02-26T08:47:03.453 に答える