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

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