javascript - 使用 Jquerys toggle 更改 'display: none' 以显示。导致内容被压扁

Question

我有这个:

<div class="sub-slider" style="display: none;">
    <section class="subscriptions_slider container-fluid">
        <?php echo do_shortcode("[subscriptions_slider]"); ?>
    </section>
</div>

然后像这样使用 Jquery:

$('.change-sub').on('click', function() {
    $('.sub-slider').toggle();
});

如果我现在加载页面并单击 change-sub 按钮。切换的内容被压缩。 但是 如果我在没有 style="display: none;" 的情况下加载页面，那么它会正常显示。这是为什么？

Answer 1

这是因为 display:none 属性会从 DOM 中移除元素，

如果您不希望元素从 DOM 中移除，而是使用 VISIBILITY:HIDDEN，它将为容器保留空间。

类似下面的内容。

<div class="sub-slider" style="visibility: hidden;">
    <section class="subscriptions_slider container-fluid">
        <?php echo do_shortcode("[subscriptions_slider]"); ?>
    </section>
</div>

和

$('.change-sub').on('click', function() {
    var visibilityProp =  $('.sub-slider').attr('visibility');
    if(visibilityProp == 'hidden')
    {
        $('.sub-slider').attr('visibility','visible')
    }
    else
    {
        $('.sub-slider').attr('visibility','hidden');
    }   
});

如果符合您的需要，请标记为答案。