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