jquery - ビューポートの幅に基づいて、Bootstrap Navbar と Jasny Off Canvas の間でバウンスする

Question

私は jQuery に少し慣れていないので、Bootstrap と Jasny Off Canvas を使用しています。900px を超えるすべてのデバイスの Bootstraps ナビゲーション バーと、900px 未満のすべてのデバイスの Jasny のオフ キャンバス メニューの間をフリックしたいと考えています。

これを達成するために、私は以下を使用しています：

 <script>   
        $(window).bind("load resize", function() {
            var width = $(window).width();
            if (width <= 900) {
                $('.nav-selector').removeClass('navbar navbar-default');
                $('.menu-items').removeClass('collapse navbar-collapse');
                $('.nav-items-selector').removeClass('nav navbar-nav');
                $('.nav-selector').addClass('navmenu navmenu-default navmenu-fixed-left');
                $('.nav-items-selector').addClass('nav navmenu-nav');
            }
            else {
                $('.nav-selector').removeClass('navmenu navmenu-default navmenu-fixed-left');
                $('.nav-items-selector').removeClass('nav navmenu-nav');
                $('.nav-selector').addClass('navbar navbar-default');
                $('.menu-items').addClass('collapse navbar-collapse');
                $('.nav-items-selector').addClass('nav navbar-nav');
            }
        });         
    </script>

これは機能しますが、私自身の学習では、2 つの完全に異なるナビゲーション (異なるメディア クエリで非表示と表示) を使用したり、両方のナビゲーション タイプの CSS のすべての行をカスタマイズしたりすることなく、ナビゲーション タイプを変更するより雄弁な方法があります。

これが理にかなっているといいのですが、そうでない場合は尋ねてください。