トリガーMDBootstrap側-NAVこれは正常に動作してカスタムハンバーガーボタン

Question

を使用して： http://jsfiddle.net/musicformellons/ef76gud7/

今、私の代わりにブートストラップのMDBootstrapを使用したいので、私はこのjQueryのコードを変更する必要があります。

$(document).ready(function() { 
    $('#navbar').on('show.bs.collapse', function() { 
     $('#nav-icon4').addClass('open'); 
    }); 
    $('#navbar').on('hide.bs.collapse', function() { 
     $('#nav-icon4').removeClass('open'); 
    }); 
}); 

このサイド-NAV（私自身のアニメーションハンバーガーを使用して、フィドルを参照）で動作するように

： http://mdbootstrap.com/javascript/sidenav/

私は私のhamburgeにこれらを追加することによって、私のハンバーガーとサイド-NAVをトリガすることができますボタン： data-activates = "slide-out" class = "button-collapse"

しかし、明らかにブートストラップナビバーの崩壊は表示されないので、私はアニメーションを失います。

新しいサイドナビゲーターと一緒にハンバーガーアニメーションを作成するにはどうすればよいですか？おそらく引用されたjQueryコードは完全に調整する必要がありますか？

以下が必要です：（1）別のCSSボタンからMDブートストラップsidenavを起動し、そのデフォルトのハンバーガーアニメーション（2）がsidenavと「同期」していなければなりません。あなたが出発点として、このバイオリンを使用することができBootstrap navbar toggle not in sync with dropdown menu

：フィドルに関する http://jsfiddle.net/musicformellons/rto14vzp/2/

コメント：

• を例えば：前に私は同じような経験を持っていたとしてだけおそらくそれトグル緩い同期を考え使用してJSとCSSのリソースパネルメッセージを無視する。私は
  mdbootstrapをリソースパネル経由で追加しようとしましたが、それは動作しませんでしたが、 現在のアプローチはします。
• mdbootstrap（CDN url経由）への参照は、mdbootstrapの空き部分 （サイドナビゲータはフリーパッケージの一部です）を参照しています。

Answer 1

ボタンのアニメーションとsideNav()オープニングトリガーと1つのjQueryステートメントを連鎖させる必要があります。あなたのスパンに.nav-icon-lineを追加した場合、それは次のようになります。

$("#nav-icon4, .nav-icon-line").click(function() { 
    $("#nav-icon4").addClass('open'); 
    $(".button-collapse").sideNav(); 
    }); 

よりここで起こってたくさんsideNav()のソースフレームワークで自由に利用できないので、私は本当にに入ることができないことがありますあなたは使用しています。考慮すべき他の

何か：

あなたはremoveClass()を使用して同じ方法で、ハンバーガーのアニメーションをリセットする必要があると思います。 sideNav()はブラックボックスなので、どのように動作するのか分かりません。私が見ることができるから、sideNav()は、あなたがそれの外をクリックするとサイドバーを隠すようです。どのような機能がその機能を制御しているのかを把握し、$("#nav-icon4").removeClass('open');を機能に入れてください。

Codepen example（まだ機能していませんが、sideNavの内部で何が起こっているかによって決まります）。