在重新调整窗口大小时分离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');

工作示例 -记住拖动结果面板的宽​​度以查看其工作情况

但是，使用JS作为响应式UI的拐杖是一个坏主意。 相反，您可以使用CSS @media查询以更简单的方式执行所需的操作：

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

.dropdown { display: none; }

工作实例