如何根据 Jquery Dialog 宽度将 2 列变为 1？答案

【问题标题】：How to make 2 columns into 1 based on Jquery Dialog width?如何根据 Jquery Dialog 宽度将 2 列变为 1？
【发布时间】：2015-09-17 16:07:12
【问题描述】：

我有一个带有以下 HTML 的 jQuery 对话框：

    <div class="left">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
    </div>
    <div class="left">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
    </div>

CSS：

.left{float:left; width:50%;}

这在我的 jQuery 对话框中创建了两列。当 jQuery Dialog 宽度低于某个数字时，如何删除 CSS？

【问题讨论】：

@shehary 屏幕没有缩小，只有对话框

标签： javascript jquery html css dialog

【解决方案1】：

您可以在对话框初始化时使用 resizeStop 事件，并检查您要查找的宽度，然后简单地从 div 中删除“left”类，如下所示（我以#dialog为例，用你自己的替换，以及将200更改为你想要的宽度）：

$( "#dialog" ).dialog({
    resizeStop: function(event, ui) {
        if ($(this).outerWidth() < 200) {
           $("#dialog > div").removeClass('left');
        }      
    }
});

JSFiddle：http://jsfiddle.net/9Lc4y6s0/

注意：如果您需要保留类，另一种方法是简单地更改 css 而不是完全删除类（即更改 float:none 和 width: initial）

【讨论】：

【解决方案2】：

我最终做了什么。比 resizeStop 工作得更顺畅一些。我在对话框中的两个 <div> 列中添加了 id。

 $("#dialog").bind( "dialogresize", function(event, ui) {
    if ($(this).outerWidth() <= 500) {
        if ($("#col1").hasClass("left")) {
            $("#col1").removeClass("left");
            $("#col2").removeClass("left");
        }
    }
    else {
        if (!$("#col1").hasClass("left")) {
            $("#col1").addClass("left");
            $("#col2").addClass("left");
        }

    }


});

【讨论】：