jquery - 扩展子 block 时增加父 block 高度(绝对)

Question

我有一种情况需要在悬停父 block 时展开不可见 block 。 parent 是固定宽度，展开的 child 是全屏宽度，因此它是 position:absolute。在下面的展开元素被覆盖。我试图使用 jquery 使用父高度 + 扩展子高度来增加父 block 高度。然而，由于此动画扩展是使用最大高度完成的，jquery 将 0 作为 child 的高度。

这是示例代码和DEMO :HTML:

<div>
    <ul class="list">
        <li class="list-el">
            <div class="el-top">Expand 1</div>
            <div class="el-bottom">Cupcake liquorice cupcake sweet roll ice cream caramels. 
                Lollipop dragée chupa chups. Sugar plum candy jelly-o bonbon gummies caramels.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
            </div>
        </li>
        <li class="list-el">
            <div class="el-top">Expand 2</div>
            <div class="el-bottom">Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
            </div>
        </li>
    </ul>
</div>

CSS:

ul{
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}
.list{
    width: 100%;
    padding: 0;
}
.list-el{
    width: 100%;
    height: 75px;
    background: #ff00ff;
    margin-top: 10px;
}

.el-top{
    width: 100%;
    text-align: center;
    line-height: 75px;
}

.el-bottom{
    text-align: center;
    -webkit-transition: max-height 1.5s ease;
    -moz-transition: max-height 1.5s ease;
    transition: max-height 1.5s ease;
    position: absolute;
    background: #f0fff0;
    top: auto;
    left: 0;
    width: 100%;
    text-align: left;
    height: auto;
    max-height: 0;
    overflow: hidden;
}

.list-el:hover .el-bottom{
    max-height: 700px;
}

也许有一些想法或建议如何以相同的动画方式增加 parent 的高度(使用 CSS 或 js/jquery)？

Answer 1

嗯。我不知道我是否充分理解了您的问题，但是...如果不使用 javascript，我会坚持只使用 CSS。

您的问题可能是隐藏内容的“position:absolute”没有填充(显然)li 的高度，因为它现在不在 html 流中。

然后你可以在这个中看到FIDDLE ，我会变通并将 position:absolute 交给 li 的 insteed。然后很容易定位这些 li，因为它们的高度已设置(关于它们的父 ul，现在需要 position:relative;)

现在你只需要添加:

.list-el:hover {
    height:auto;
    max-height: 700px;
}

现在由于隐藏内容相对定位，它会自动“填充”li。

注意:我已将 z-index:1 添加到您的第一个 li 以确保它始终位于顶部，但如果您更改 li 在 html 中的 html 顺序，结果将是相同的，您不需要 z-index(因为最后一个元素将在顶部)