javascript - jQuery 调整大小闪烁

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 以对这些事件作出 react :

当 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; 在上述条件下显示您想要的任何元素。