主页 / 问题 / 852094
Accepted
ZELIBOBA
Asked:2020-07-09 18:18:52 +0000 UTC2020-07-09 18:18:52 +0000 UTC

在js中将元素从一个块移动到另一个块

  • 772

我在 bs3 上有一个菜单并且有一个过滤器。菜单位于一个单独的块中（以蓝色圈出），过滤器在另一个块中（以红色圈出） 在此处输入图像描述

在手机和平​​板电脑上（例如 max-width: 768px），过滤器应该在菜单中（箭头指示）在此处输入图像描述

如何在不使用 position:absolute 的情况下使用 max-width:768px 将过滤器从一个块移动到另一个块

javascript

1 个回答

  1. Best Answer

    绝对不是最好的解决方案。

    function changeTemplate(){
  if($(window).width()<768){
    //при ширине окна менее 768px перемещаем фильтр в шапку
    $('main .filter').prependTo('header');
  }else{
    //в противном случае перемещаем в своё обычное место
    $('header .filter').prependTo('main');
  }
}
$(document).ready(changeTemplate);
$(window).resize(changeTemplate);
    *{
  box-sizing:border-box;
}
body{
  margin:0;
}
header{
  background-color:#555;
  padding:10px;
  display:flex;
}
.menu{
  background-color:#acd;
  height:30px;
  flex:1 1 auto;
}
main{
  display:flex;
}
.filter{
  background-color:#dac;
  width:200px;
  flex: 0 0 auto;
}
.content{
  height:100vh;
  flex:1 1 auto;
  background-color:#cda;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="menu">меню</div>
</header>
<main>
  <div class="filter">фильтр</div>
  <div class="content">контент</div>
</main>

    • 2

相关问题