javascript - 将 div 移至特定 div 内，并在某些断点处再次移回

Question

<div class="result-display">
  <div class="results-heading">
    <div class="heading active" data-tab="first">First</div>
    <div class="heading" data-tab="second">Second</div>
  </div>
  <div class="results-body">
    <div class="body-item first current">
      "Text for first item"
    </div>
    <div class="body-item second">
      "Text for second item"
    </div>
  </div>
</div>

是否可以使用 first 和 的数据选项卡将 .body-item first 移动到 .heading div 内.heading div 内的 >.body-item secondary ，当窗口宽度到达某个断点时，数据选项卡为 second，并返回到其另一个断点处的原始位置？

一些内容:

  $(window).on('resize', function() {
    var ww = $(window).width();
    if (ww <= 800) {
        // move inside divs
    } else {
     // move to original positions
    }
  })

如果是这样，我怎样才能实现这样的目标？

Answer 1

好吧，你只需要appendTo根据您的情况，将文本从源元素添加到目标元素

$(".body-item.first").appendTo(".heading[data-tab='first']")

其他元素也是如此

$(".body-item.first").appendTo(".heading[data-tab='first']")


$(".body-item.second").appendTo(".heading[data-tab='second']")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="result-display">
  <div class="results-heading">
    <div class="heading active" data-tab="first">First</div>
    <div class="heading" data-tab="second">Second</div>
  </div>
  <div class="results-body">
    <div class="body-item first current">
      "Text for first item"
    </div>
    <div class="body-item second">
      "Text for second item"
    </div>
  </div>
</div>