如何在另一个内部移动div响应？

Question

我想将{p <1}}中的p元素移到.a div，以响应例如768px，我该怎么做？

＆＃13;

＆＃13;

.b

＆＃13;

div{margin:10px;
padding:10px;}
.a{
background:#f0f0f0;
border:1px solid #ccc;
}
.b{
background:#999;
border:1px solid #666;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以检查window宽度，然后使用appendTo()方法将元素从.a移至.b，如下所示：

if ($(window).width() < 768) {
  $('.a p').appendTo('.b');
}

div {
  margin: 10px;
  padding: 10px;
}

.a {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.b {
  background: #999;
  border: 1px solid #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

如果您想在调整浏览器大小时看到它，可以使用$(window).resize(function(){ //your code here... })以及上面的代码。像这样：

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('.a p').appendTo('.b');
  }
}).resize();

div {
  margin: 10px;
  padding: 10px;
}

.a {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.b {
  background: #999;
  border: 1px solid #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

Answer 2

是的，没错。您无法使用Css更改HTML结构。可以使用一些代码行完成。

window.addEventListener('load', function () {
    var a = document.querySelector('.a');
    var b = document.querySelector('.b');
    var c = document.querySelector('p');

    window.addEventListener('resize', function (event) {
        if (768 >= window.innerWidth && 'a' === c.dataset.location) {
            b.appendChild(c);
            c.dataset.location = 'b';
        } else if (768 < window.innerWidth && 'b' === c.dataset.location) {
            a.appendChild(c);
            c.dataset.location = 'a';
        }
    });
}, {once: true});

div {
    margin: 10px;
    padding: 10px;
}

.a {
    background: #f0f0f0;
    border: 1px solid #ccc;
}

.b {
    background: #999;
    border: 1px solid #666;
}

<div class="a">
    <p data-location="a">lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

Answer 3

我通过使用一些jquery代码（更具体地，.resize() function）并通过向＆lt;添加id来找到此解决方案。 p为H.你要移动的元素（#moveElement）：

$( window ).resize(function() {
  if ($(window).width() < 768) {
    $('#moveElement').appendTo('.b');
  } else {
    $('#moveElement').appendTo('.a');
}});

检查此fiddle以查看有效的示例。