使用Jquerys切換來改變'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

這是因爲顯示：隱藏，它將保留空間容器：如果你不想要的元素得到刪除從DOM而使用可視性無財產將會移除DOM元素，

。

像下面這樣的東西。

<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'); 
    } 
}); 

請把它標記爲答案，如果它是根據自己的需要。