Question

我正在尝试在#project-right-content下方h1.entry-title移动调整大小和加载。到目前为止，它只适用于调整大小。为什么它在加载时不起作用？

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

    if ($(window).width() < 934) {
        $('#project-right-content').insertAfter('#project-left-content .entry-title');
    } else {
        $('#project-right-content').insertAfter('#project-left-content');
    }

});

以下是我正在尝试做的HTML：

<div id="project-wrapper>
    <div id="project-container">
        <div class="post-container">
            <div id="project-left-content">
                <h1 class="entry-title">Title</h1>  <--- after this line |
                <p>Description goes here.</p>                            |
            </div>                                                       |
            <div id="project-right-content">      <-- THIS should be moved
                <div id="slider">
                    <div id="slides">
                        <!-- Slide goes here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

window对象未触发load事件。

一个选项是在事件监听器之后链接.resize() method ，以便在页面加载时触发resize事件。

Example Here

$(window).on('resize', function () { if ($(window).width() < 934) { $('#project-right-content').insertAfter('#project-left-content .entry-title'); } else { $('#project-right-content').insertAfter('#project-left-content'); } }).resize(); // <-- added

Answer 2

我在回答时感到难过，试试这个：

jQuery(document).ready(function($) {

  function resize() {
    if ($(window).width() < 934) {
      $('#project-right-content').insertAfter('#project-left-content .entry-title');
    } else {
      $('#project-right-content').insertAfter('#project-left-content');
    }
  }

  resize();

  $(window).on('resize', resize);

});

在调整大小和加载时移动DOM元素。仅适用于调整大小

2 个答案: