Question

我环顾四周，发现类似于我的问题，但不完全相同。我有一个页面模板，以4列HTML格式排列。在第4列中，我有一个回显图像库的php函数。

    <div id="homepage-layout">

        <div id="homepage-column-1">
            <div class="homepage-small"><?php echo get_homepage_img_small_1(); ?></div>
            <div class="homepage-small"><?php echo get_homepage_img_small_2(); ?></div>
            <div class="homepage-small"><?php echo get_homepage_img_small_3(); ?></div>
        </div><!-- End Column 1 -->

        <div id="homepage-column-2">
            <div class="homepage-large-left"><?php putRevSlider("homepage"); ?></div>
        </div><!-- End Column 2 -->

        <div id="homepage-column-3">
            <div class="homepage-med"><?php echo get_homepage_img_med_1(); ?></div>
            <div class="homepage-med"><?php echo get_homepage_img_med_2(); ?></div>
        </div>

        <div id="homepage-column-4">
            <div class="homepage-large-right"><?php putRevSlider("home_small"); ?></div>
        </div><!-- End Column 4 -->

    </div>

我正在使用jQuery根据窗口的宽度更改网站的布局。

    var column3 = $("#homepage-column-3").contents();
    var column4 = $("#homepage-column-4").contents();
    var swapped = false;

    $(window).on('resize', function() {   
        if( $(window).width() <= 700 && !swapped){
            $("#homepage-column-3").html(column4);
            $("#homepage-column-4").html(column3);
            swapped = true;
        } else if( $(window).width() > 700) {
            $("#homepage-column-3").html(column3);
            $("#homepage-column-4").html(column4);
            swapped = false;
        }
    });

但是，当窗口大小触发jQuery时，第4列的RevSlider会冻结当时显示的图像，并且让它再次运行的唯一方法是刷新页面。

有什么想法？或者，如果已经回答了这个问题，请指出我正确的方向。

谢谢！

Answer 1

jeroen有正确的想法。我能够取4列，并将它们分成2个块。然后我能够将它们都设置为flex容器，并且通过媒体查询，能够使列交换位置，同时保持RevSlider初始化。

感谢大家的帮助！

如何将php调用移动到另一个div并使其仍然有效

1 个答案: