Question

我有一小段代码，我一直在努力在浏览器宽度低于768时交换两个div，我的问题是它有效但只有当你调整窗口大小时，而不是当它加载到下面时768，当你将窗口全屏展开后，它也不会将div交换回来，任何帮助都会受到赞赏。 Fiddle here

    $(window).on('resize', function (event) {
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            jQuery(".swap2").after(jQuery(".swap1"));
        }
    });

Answer 1

移动决定何时换成函数的逻辑，比如说swap()。您可以在运行时执行该函数，然后在窗口调整大小事件:)

中再次执行

// Declare the swap() function with accompanying logic
var swap = function() {
    if ($(window).width() > 768) {
        $(".swap2").after($(".swap1"));
    }
}

// Swap on load
swap();

// Swap on resize
$(window).on('resize', function() {
   swap();
});

但是，此交换操作仅单向。如果你想要一个真正响应的，你将不得不用else语句交换另一个方向：

var swap = function() {
    if ($(window).width() > 768) {
        $(".swap2").after($(".swap1"));
    } else {
        $(".swap2").before($(".swap1"));
    }
}

请参阅此处的固定小提琴：http://jsfiddle.net/teddyrised/tpu1fg5y/

或者，您可以使用使用CSS3 flexbox order属性的无JS解决方案：

.swap-wrap {
    display: flex;
    flex: 1 0 auto;
}
.swap1 { width:80%; background:red; order: 2; }
.swap2 { width:20%; background:blue; order: 1;}

@media (max-width: 767px) {
    .swap1 { order: 1; }
    .swap2 { order: 2; }
}

请参阅此处的示例：http://jsfiddle.net/teddyrised/8o91ohn6/

在某个浏览器宽度交换div

1 个答案: