Question

现在，当屏幕小于992px时，我正在将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元素移动到另一个具有底部id的div元素，但是当我再次使窗口全尺寸时，它不会将具有顶部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");
}

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

1 个答案: