@库马尔
它还没有完全完成，但我想我创造了你想要的效果：
Codepen: CSS Flexbox need accordion effect on hover (SO)
魔术的主要部分现在发生在 javascript 中，主要是在 initProductDesc 中。我使用了 jQuery，但您当然可以将其更改为 vanilla。
您仍然需要通过添加边距来调整容器的初始高度。
$('.hide').each(function() {
$hide = $(this);
$hide.attr('data-initial-height', $hide.height()); // change height to include margin-top too -> outerHeigth() or something for example.
$hide.addClass('initialized');
});
这有帮助吗？
如果您必须在响应中更改容器的宽度和高度，这也应该可以工作，并且它也可以与 .hide-container 的动态高度一起工作（至少我认为，但未经测试）。
完整代码：
html（必须删除 base64 图像代码 -> 字符限制）：
<ul class="product-container" id="">
<li class="l-product">
<img src="image.png" />
<p class="name">Product 2</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 5</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 6</p>
<p class="role leader-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 7</p>
<p class="role leader-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 8</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 9</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 10</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 11</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
<li class="l-product">
<img src="image.png" />
<p class="name">Product 12</p>
<p class="role product-description">category</p>
<div class="hide">product description.</div>
</li>
</ul>
scss:
.product-container {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
list-style: none;
width: 100vw;
overflow: hidden;
padding: 0;
font-family: "Open Sans', sans-serif";
letter-spacing: -0.005em;
color: black;
margin: 0 8rem;
column-gap: 3.2rem;
overflow: hidden;
&, & * {
box-sizing: border-box;
}
.l-product {
flex: 0 0 auto;
margin-top: 4rem;
margin-top: 6rem;
position: relative;
overflow: hidden;
padding-bottom: 0;
transition: all 0.5s ease-in;
&.open {
overflow: visible;
}
img {
height: 29.6rem;
width: 29.6rem;
border: 1px solid gray;
border-radius: 2px;
}
.name {
margin: 2.4rem 0 0 0;
width: 10.8rem;
height: 1.8rem;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 18px;
text-align: left;
}
.role {
margin: 1.6rem 0 0 0;
width: 20.9rem;
height: 1.6rem;
font-style: italic;
font-weight: normal;
font-size: 14px;
line-height: 16px;
text-decoration-line: underline;
text-align: left;
}
.hide {
display: block;
width: 1280px;
height: 526px;
position: absolute;
margin-top: 162px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 2px;
transition: all 0.5s ease-in;
}
&:not(.open) {
.hide {
&.initialized {
height: 0;
}
}
}
}
}
javascript/jQuery:
var initProductDesc = function() {
$('.hide').each(function() {
$hide = $(this);
$hide.attr('data-initial-height', $hide.height());
$hide.addClass('initialized');
});
$('.product-description').on('click', function() {
$thisDescription = $(this);
$thisLi = $thisDescription.closest('.l-product');
$thisHide = $thisDescription.siblings('.hide');
toggledOpen = toggleClass($thisLi, 'open');
if (toggledOpen) {
$thisLi.css('padding-bottom', $thisDescription.siblings('.hide').attr('data-initial-height') + 'px');
}
else {
$thisLi.css('padding-bottom', '');
}
});
}
var toggleClass = function($element, classname) {
if ($element.hasClass(classname)) {
$element.removeClass(classname);
return false;
}
else {
$element.addClass(classname);
return true;
}
}
$(function() {
initProductDesc();
});