jQuery调整大小闪烁

Question

当 .tabla_gs_gm 的宽度超过 .content 时，我希望 .tabla_gs_gm 消失并出现另一个 div。这已经实现了，但是当屏幕被调整大小时，两个 div 之间会闪烁。我确定是因为 resize 函数造成的，但我能做些什么呢？ 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;
}

- Polo

---

你可以做的第一件事：设置一个我们可以使用的示例；-) - empiric

我已经更新了问题，附带了HTML和CSS。 - Polo

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 不成立时，请使用 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;来显示任何元素。

- David Zorychta

---

我已经尝试使用您的代码，但仍然会闪烁。我已更新问题，并附上了您的代码以及一些HTML和CSS。 - Polo

现在它可以工作了，当“.tabla_gs_gm”的高度超过内容时，我已将其设置为0像素。无论如何，谢谢！ - Polo

Answer 2

当".tabla_gs_gm"的高度超过内容时，我已将其设置为0像素，现在不会闪烁。

<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>

- Polo