使用 jQuery .slideToggle() 和 display: grid;

Question

我有一組可折疊/可展開的元素，我希望以display:grid格式布置內部內容。

在我當前的設置中，我在$().slideToggle()方法中使用一個鈎子來調用一個匿名函數，該函數檢查元素是否可見並強制顯示為網格。

這不是一個好的解決方案，因為在第一次顯示內容的擴展動畫期間，內容不是網格格式。 它僅在動畫完成后應用正確的格式。 請參閱此處的 jsfiddle 。

在 css/jquery 中進行設置以便內部可擴展內容即使在第一個動畫期間也顯示為網格的合適方法是什么？

HTML

<div class="user-products main">
        <div class="user-product">
            <div class ="collapsible-header">
                <span class="user-product-expand-toggle"><h4>&#9654; Product 1 - 2020-02-03 1:58pm</h4></span>
            </div>
            <div class="user-product-details hide">
                <div class="user-product-left">
                <p>Download All Files as Zip</p>
                <p>View Preview</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-mid">
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-right">
                <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
                </div>
            </div>
        </div>
        <div class="user-product">
            <div class ="collapsible-header">
                <span class="user-product-expand-toggle"><h4>&#9654; Product 2 - 2020-02-07 5:01pm</h4></span>
            </div>
            <div class="user-product-details hide">
                <div class="user-product-left">
                <p>Download All Files as Zip</p>
                <p>View Preview</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-mid">
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                <p>Details</p>
                </div>
                <div class="user-product-right">
                <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div>
                </div>
            </div>
        </div>
    </div>

jQuery

$(".user-product-expand-toggle").click(function(){
    parentDiv = $(this).closest(".collapsible-header");
    $(parentDiv.siblings(".user-product-details")[0]).slideToggle('slow', function() {
        if ($(this).is(':visible'))
            $(this).css('display','grid');
    });

});

CSS

.hide.hide {
  display: none;
}

.user-products.main {
    overflow-y:auto;
}
.user-product-details {
    margin-left:50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.collapsible-header{
    margin-left:50px;
    text-align: left;
    cursor: pointer;

}

Answer 1

而不是使用slideToggle，使用slideUp 和slideDown。

例子：

$(".user-product-expand-toggle").click(function(){

    parentDiv = $(this).closest(".collapsible-header");

    let $element = $(parentDiv.siblings(".user-product-details")[0]);

    if ($element.is(':visible')) {
        $element.slideUp();
    }
    else {
        $element.slideDown({
            start: function() {
              $(this).css('display','grid');
            }
        });
    }

});

演示小提琴

Answer 2

jQuery 使用帶有slideToggle方法的display屬性。 這種 jQuery 設計與display屬性的對齊方式不兼容。

因此，這個問題很容易解決的方法如下：

1. 在動畫開始和結束時使用height屬性幻燈片動畫和切換display屬性。
2. 分為兩部分，一是隱藏元素，一是對齊元素。

簡單的解決方法是通過隱藏容器包裝網格容器（2.解決方案）：

 $(".user-product-expand-toggle").click(function() { parentDiv = $(this).closest(".collapsible-header"); $(parentDiv.siblings(".hide")[0]).slideToggle('slow'); });

 .hide.hide { display: none; } .user-products.main { overflow-y: auto; } .user-product-details { margin-left: 50px; display: grid; grid-template-columns: repeat(3, 1fr); } .collapsible-header { margin-left: 50px; text-align: left; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="user-products main"> <div class="user-product"> <div class="collapsible-header"> <span class="user-product-expand-toggle"> <h4>&#9654; Product 1 - 2020-02-03 1:58pm</h4> </span> </div> <div class="hide"> <div class="user-product-details"> <div class="user-product-left"> <p>Download All Files as Zip</p> <p>View Preview</p> <p>Details</p> <p>Details</p> <p>Details</p> </div> <div class="user-product-mid"> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> </div> <div class="user-product-right"> <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div> </div> </div> </div> </div> <div class="user-product"> <div class="collapsible-header"> <span class="user-product-expand-toggle"> <h4>&#9654; Product 2 - 2020-02-07 5:01pm</h4> </span> </div> <div class="hide"> <div class="user-product-details "> <div class="user-product-left"> <p>Download All Files as Zip</p> <p>View Preview</p> <p>Details</p> <p>Details</p> <p>Details</p> </div> <div class="user-product-mid"> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> <p>Details</p> </div> <div class="user-product-right"> <div class="unpurchased-product"><button class="purchase-product">Purchase</button></div> </div> </div> </div> </div> </div>

Answer 3

將您的div包裝到另一個div 。

 <div id="block_for_toggle"> <div style="display: grid"></div> </div>