分離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