jquery - 使用 jQuery .slideToggle() 显示 : grid;

Question

我有一组可折叠/可展开的元素，我希望将内部内容以 display:grid 格式布局。

在我当前的设置中，我在 $().slideToggle() 方法中使用钩子(Hook)来调用匿名函数，该函数检查元素是否可见并强制显示为网格。

就目前而言，这不是一个好的解决方案，因为在第一次显示内容的扩展动画期间，内容不是网格格式。它仅在动画完成后应用正确的格式。 See jsfiddle here .

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

});

Demo Fiddle