我有一组可折叠/可扩展的元素,我希望内部内容以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>▶ 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>▶ 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;
}
不要使用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');
}
});
}
});
演示Fiddle
display
属性与slideToggle
方法一起使用。此jQuery设计与display
属性的对齐不兼容。
因此,这个问题很容易解决的方法如下:
- 使用
height
属性幻灯片动画,并在动画开始和结束时切换display
属性 - 分为两部分,一部分用于隐藏元素,另一部分用于对齐元素
简单的孤立是用隐藏容器包裹网格容器(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>▶ 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>▶ 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>
将您的div
包装到另一个div
中。
<div id="block_for_toggle">
<div style="display: grid"></div>
</div>