ウィンドウのサイズ変更に再接続するとjQueryが機能しない

Question

ユーザーがスケールの幅を調整する方法に応じて、ナビゲーションバーの一部をアイコンで削除して追加しようとしています。

のjavascript：

$(function() { 
    var $window = $(window); 
    var store; 
    function detach() { 
     if ($window.width() > 720) { 
      store = $(".dropdown").detach(); 
     } 
     else { 
      $("nav").append(store); 
      store = null; 
     } 
    } 

    detach(); 
    $(window).on('resize', function() { 
     detach(); 
    }); 
}); 

私は削除しようとしているナビゲーションバー：

<div class="dropdown"> 
     <button class="dropbtn"><i class="fa fa-bars" aria-hidden="true"></i></button> 
     <div class="dropdown-content"> 
     <a href="#">Login</a> 
     <a href="#">Register</a> 
     </div> 
    </div> 

このスクリプトは、ユーザーがそれをスケールしかしとき、ナビゲーションバーからアイコンを「切り離す」ことに成功しました戻って、それを再接続しません。

Answer 1

コードの主な問題は、storeへの参照を失うためです。ページが読み込まれたときに参照を取得した場合のコードは動作します：

var $window = $(window); 
var $store = $(".dropdown"); 

function detach() { 
    if ($window.width() > 720) { 
    $store.detach(); 
    } else { 
    $("nav").append($store); 
    } 
} 

$(window).on('resize', function() { 
    detach(); 
}).trigger('resize'); 

Working example - それは応答のための松葉杖としてJSを使用して

しかしワーキング見るために結果パネルの幅をドラッグすることを忘れないでくださいUIは悪い考えです。代わりに、あなたは、はるかに簡単な方法で、必要なものを行うにはCSSの@mediaクエリを使用することができます。

@media (max-width: 720px) { 
    nav .dropdown { display: block; } 
} 

.dropdown { display: none; } 

Working example