Question

我希望当.tabla_gs_gm的宽度超过.content时，.tabla_gs_gm消失，另一个div出现。这已经有效但是当调整大小的屏幕在两个div之间闪烁时。我确定它适用于调整大小功能，但我该怎么办？

jQuery的：

<script>    
    function jqUpdateSize(){

        var content = $(".content").width();                                        
        var tabla_gs_gm = $(".tabla_gs_gm").width();

        if(tabla_gs_gm >= content){
            $(".grillas_mobile").css("display","block");
            $(".grillas_desktop").css("display","none");
        }else{
            $(".grillas_desktop").css("display","block");
            $(".grillas_mobile").css("display","none");
        } 

    };
    $(document).ready(jqUpdateSize);
    $(window).resize(jqUpdateSize);
</script>

HTML：

  <div class="content">
        <div class="grillas_desktop">
            <table>
                //content
            </table>
        </div>

        <div class="grillas_mobile">
            <table>
                //content
            </table>
        </div>
    </div>

CSS：

.grillas_desktop, .grillas_mobile{
    margin: 10px auto;
    width: 100% !important;
    height: auto;
    overflow: hidden;
    display: block;
}

table.tabla_gs_gm{
    margin: auto;
    width: 99%;
    border-collapse: collapse;
}

.tabla_gs_gm td{
    padding: 3px;
}

.tabla_gs_gm .class_label{
    display: block;
    vertical-align: middle;
    text-align: center;
}

.grillas_mobile select{
    margin: 3px 0px 10px 0px;
    width: 100%;
    padding: 3px 3px;
}

Answer 1

在短时间内，这两个对象都没有resizing类，因此您会看到一些有趣的结果。您可以为此选择任何常见的父级，但我将使用body。您可以向body添加一个类，指示当前正在调整大小的内容以及不调整大小的内容，以及同时应用相应CSS选择器的方式：

<script>    
    function jqUpdateSize(){

        var content = $(".content").width();
        var tabla_gs_gm = $(".tabla_gs_gm").width();

        if(tabla_gs_gm > content){
            $('body').addClass('mobileResizing');
        }else{
            $('body').removeClass('mobileResizing');
        }   


    };
    $(document).ready(jqUpdateSize);
    $(window).resize(jqUpdateSize);
</script>

然后，您可以将CSS设置为对这些事件作出反应，如下所示：

当tabla_gs_gm > content为真时，请在选择器前加上body.mobileResizing：

body.mobileResizing .grillas_mobile {
  /* CSS for mobile when its resizing */
}
body.mobileResizing .grillas_desktop {
  /* CSS for desktop when mobile is resizing */
}

并且当tabla_gs_gm > content为false时使用body:not(.mobileResizing)：

body:not(.mobileResizing) .grillas_mobile {
  /* CSS for mobile when desktop is resizing */
}
body:not(.mobileResizing) .grillas_desktop {
  /* CSS for desktop when its resizing */
}

您可以插入display: none;隐藏或display: block;根据上述条件显示您想要的任何元素。

Answer 2

我设定了＆＃34; .tabla_gs_gm＆＃34;的高度当超过内容并且现在不闪烁时为0px。

<script>    
    function jqUpdateSize(){

        var content = $(".content").width();                                        
        var tabla_gs_gm = $(".tabla_gs_gm").width();

        if(tabla_gs_gm >= content){
            $(".grillas_mobile").css("display","block");
            $(".grillas_desktop").css("height","0px");
        }else{
            $(".grillas_desktop").css("height","auto");
            $(".grillas_mobile").css("display","none");
        } 

    };
    $(document).ready(jqUpdateSize);
    $(window).resize(jqUpdateSize);
</script>

jQuery调整大小闪烁

2 个答案: