javascript - 当屏幕小于 992px 时将 div 移动到另一个 div，对于大于 992px 的屏幕将其移动到原始位置

Question

现在，当屏幕小于 992 像素时，我将 div 标签移动到另一个 div 标签。但如果屏幕再次大于 992px，则应将其重新放置在原始位置。

HTML

<div id="top">
  <div id="translate-this">
    <a class="translate-this-button" href="//www.translatecompany.com/translate-this/">Translate This</a>
  </div>
</div>

<div id="bottom"></div>

jQuery

$(document).ready(function() {
  $(window).on('resize',function(){
    if ($(window).width() < 992) {   
      $("#top").appendTo("#bottom");
    } else {  
      $("#bottom").appendTo("#top");
    }
  }); 
});

当我减小浏览器的窗口大小时，它将 div 元素移动到另一个具有 bottom id 的 div 元素，但是当我再次使窗口全尺寸时，它不会将具有 top id 的 div 移动到其原始位置。

Answer 1

当您使屏幕小于 992 时，#top 会附加到 #bottom 内部，将 html 转换为此

<div id="bottom">
 <div id="top">
  <div id="translate-this"><a class="translate-this-button"  href="//www.translatecompany.com/translate-this/">Translate This</a>
  </div>
 </div>
</div>

然后当你使屏幕变大时，你尝试执行$("#bottom").appendTo("#top");。这会尝试将 #bottom 附加到 #top 中，这是没有意义的，因为 #bottom 有 #top 里面

您可以像这样移动 translate-this div:

if ($(window).width() < 992) {   
   $("#translate-this").appendTo("#bottom");
}
else {  
   $("#translate-this").appendTo("#top");
}