Question

我有一种情况需要在父块的悬停时扩展隐藏块。 parent是固定宽度，扩展的子项是全屏宽度，因此它是position:absolute。覆盖下面的展开元素。我试图使用父高度+扩展子高度使用jquery增加父块高度。然而，这个动画扩展是使用max-height完成的，jquery将0视为孩子的高度。

以下是示例代码和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;
}

也许一些想法或建议如何以相同的动画方式增加父母身高（使用CSS或js / jquery）？

Answer 1

好。我不知道我是否已经很好地理解了你的问题，但是...坚持使用javascript我会坚持使用CSS。

你的问题可能是隐藏内容的`position：absolute'没有填充（显然）li的高度，因为它现在已经超出了html流程。

然后正如您在 FIDDLE 中看到的那样，我会努力解决问题并将position:absolute提供给li。然后很容易定位这些li的高度设置（相对于他们的父级ul，现在需要position:relative;）

现在你只需要添加：

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

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

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

Answer 2

根据您提供的链接，我假设您希望扩展2移动，以便为el-bottom类留出足够的空间来扩展。

在此之后，我使用flexbox css3功能自动移动扩展项目后的项目。

here是我使用的文档。

根据您提供的代码，为了使一切正常，您必须：

添加＆＃34;显示：flex＆＃34;属性到容器类＆＃34;列表＆＃34;
添加＆＃34; flex-direction：列＆＃34;属性到容器类＆＃34;列表＆＃34;制作物品＆＃34; list-el＆＃34;垂直安排
添加＆＃34;位置：relative＆＃34;属于＆＃34; list-el＆＃34;和＆＃34; el-bottom＆＃34;告诉容器考虑他们的尺寸。否则，它们将重叠下一个＆＃34;列表＆＃34;。

根据您提供的代码，这是我的小提琴：

＆＃13;

ul {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
}
.list {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}
.list-el {
  width: 100%;
  background: #ff00ff;
  margin-top: 20px;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  transition: all 1.5s ease;
  position: relative;
}
.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: relative;
  background: #f0fff0;
  top: auto;
  left: 0;
  width: 100%;
  text-align: left;
  max-height: 0;
  overflow: hidden;
  margin-top: 10px;
}
.list-el:hover .el-bottom {
  max-height: 700px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

在子块扩展时增加父块高度（绝对值）

2 个答案: