Question

我遇到这种情况：DEMO

我尝试实现的是按下扩展块下面的一排块。起初我尝试使用jquery获取并将扩展子级的高度添加到父级，然后按下下一行块以实现类似这样的操作：http://imgur.com/7k0Rc21，但在悬停高度（）返回0并使用延迟会使动画看起来像马车。

这是代码：

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>
        <li class="list-el">
            <div class="el-top">Expand 3</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 4</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{
    display: block;
    max-height: 700px;
}

也许有人有一些想法如何解决这个问题？非常感谢。

评论：Link上建议的解决方案正在解决同样的问题，只是我错过了我想要达到的目标，因此问题并没有真正涵盖实际问题，因为没有一个答案适合这种情况我更新了问题以获得更清晰的观点。因为问题是要求如何获得高度的解决方案，但是错过了我将如何以及为什么要使用它的事实，因此这些问题的解决方案并不适合这个问题。

在展开时将绝对定位子元素的父元素添加高度

0 个答案: