Question

我有一个与购物车插件配合使用的div，可以在侧边栏中显示购物车。

我正在构建的网站具有响应性，在设计中，当屏幕尺寸低于1024px时，“Items”div会移动到网站的标题中

我试图隐藏并显示带有媒体查询的div，但它们都具有相同的ID，所以我想要做的是在1024处有侧边栏中的“Items”，如果屏幕调整大小，请删除侧边栏中的“项目”并将其添加到标题中。

这可能吗？

很抱歉，如果这看起来很简单，

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();

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

2 个答案: