jQuery的 - 通过窗口触发儿童移动元素调整

我已经在我的网站放置在一旁带班“左巴”的过滤器。我的网站是响应式的，我希望过滤器可以通过班级'mobile-top-bar'移动到div。jQuery的 - 通过窗口触发儿童移动元素调整

第一个“如果”我检查窗口尚未低于992px和当那是过滤器将被移动到“移动顶吧”的情况下（这伟大工程）

if ($(window).width() < 992) { 
    $('#moveableFilter').prependTo('.mobile-top-bar'); 
}

随着第二一段代码，我做了应该移动过滤器来回的功能，但这并没有发生。当我稍微改变了窗口的宽度（当它仍然高于992px）并且当我将它改变到992px以下时，过滤器已经从'左栏'消失了，它不存在于移动顶部栏中。

我做了什么错？

$(window).on('resize', function(){ 
    var win = $(this); 
    if (win.width() < 992) { 
     $('#moveableFilter').prependTo('.left-bar'); 
    } else if (win.width() >= 992) { 
     $('#moveableFilter').prependTo('.mobile-top-bar'); 
    } 
});

来源

2016-02-02 remkovdm

出于好奇，什么理由你不使用[CSS媒体查询（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）？ – jaunt

并使用两个过滤器'display：none/block;'？因为在#moveableFilter中生成的过滤器具有相同的id。 'left-bar'和'mobile-top-bar'的第一个过滤器将具有相同的ID。 – remkovdm

它看起来像你切换案件意外。试试这个：

$(window).on('resize', function(){ 
    var win = $(this); 
    if (win.width() >= 992) { 
     $('#moveableFilter').prependTo('.left-bar'); 
    } else if (win.width() < 992) { 
     $('#moveableFilter').prependTo('.mobile-top-bar'); 
    } 
});

...但是，我与说，这将是最好不要使用两个不同的酒吧，但把它与CSS媒体查询移动评论表示赞同。

来源

2016-02-02 09:22:41 KWeiss

如何使用媒体查询将子div移动到子项中？ – remkovdm

下面介绍如何使用媒体查询：https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries。在最大宽度：992px的媒体查询中，您将按照.mobile-top-bar现在定位的相同方式定位.left-bar Div。如果我的答案解决了您的问题，请接受！ – KWeiss

jQuery代码工作正常！谢谢！我的确切换了它。 – remkovdm

jQuery的 - 通过窗口触发儿童移动元素调整

回答

相关问题