jquery - 根据屏幕大小将div插入标题？

Question

我有一个与购物车插件一起使用的 div，该插件在侧边栏中显示购物车。

我正在构建的网站是响应式的，在设计中，当屏幕尺寸低于 1024 像素时，“Items” div 会被移动到网站的标题中

我尝试使用媒体查询隐藏和显示 div，但它们都具有相同的 ID，所以我想做的是在 1024 处说侧边栏中有“项目”，如果屏幕被调整到下方，请删除“项目”从侧边栏并将其添加到标题中。

这可能吗？

抱歉，如果这看起来很容易解决，

Answer 1

您可以使用 jQuery 检查窗口宽度，并根据大小显示和隐藏基本 div。

if($(window).width() >= 1024) {
      $("#div1").show();
      $("#div2").hide();
} else {
      $("#div1").hide();
      $("#div2").show();
}

Answer 2

也许是这样的（未经测试，但应该让您对一种方法有一个大致的了解）。基本上，它将检查窗口大小的调整大小。如果它小于 1024，#items div 将被删除并附加到 #header。否则，它将被重新附加到#sidebar，假设它已经附加到标题中。

    function itemsToHeader(){


        $items = $('#items');

        if( $(window).innerheight() < 1024 ){

            if( $('#header').find('#items').length <= 0 ){
                $items.remove().appendTo('#header');
            }

        }else{
            if( $('#header').find('#items').length > 0 ){
                $items.remove().appendTo('#sideBar');
            }
        }

    }

    $(window).on('resize', function(){

        itemsToHeader();

    });

    itemsToHeader();