Question

我希望从另一个div下方有一个新的/隐藏的div滑动。我的想法是我有一个输入字段和一个添加按钮。单击添加按钮时，将显示更多表单元素（向下滑出）。其中的形式部分对我的问题并不重要，所以我只是让第一个div成为文本“hover me to reveal new div”，新的slide-down-div是一些随机文本。

到目前为止，我有这个HTML：

<div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>

这个css：

.one {
    position: relative;
    top: 100px;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: absolute;
    top: 60px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
    }

.one:hover + .two {
    top: 100px;
}

参见jsfiddle：http://jsfiddle.net/8ZFMJ/

这种作品。但是第二个div高于第一个div，所以它在第一个div之上可见，我不希望这样。如何让它以我想要的方式滑下第一个div？如果我在这个过程中最终没有第一个div必须知道第一个div的位置，那也会很好......

Answer 1

将两个div放在一个容器中（两个div的高度合并。），并将div放在容器的最顶部。然后将容器设置为overflow:hidden;

这样的事情： http://jsfiddle.net/8ZFMJ/2/

此致

Answer 2

（编辑使用css3动画而不是jQuery的slideDown()）

此解决方案可在没有悬停元素下方的额外空白区域的情况下工作。此外，您不必指定包含元素的高度。

我们必须在此处为容器的max-height设置动画，而不是height（请参阅How can I transition height: 0; to height: auto; using CSS?）。有关在悬停时显示基础元素并在单击时关闭的工作版本，请参阅this JsFiddle。

这种方法的缺点是你必须为滑动元素指定一个max-height属性，以便属性的值大于元素的内容。由于动画在元素的最大高度上工作，因此它也不能太大（参见下面的示例）。

示例：已打开的max-height设置为500px，实际内容高度为100px，过渡动画持续5秒。打开动画的第一秒用于显示内容，用户看不到接下来的四秒。请注意，这可以两种方式工作，因此关闭动画在单击元素后四秒钟开始。

更多javascript：）

使用jQuery的函数确实可以获得内部元素所需的高度。以下示例演示了如何使用css3动画和jQuery来避免上述问题。

关键是将滑动元素的元素包装到div并在悬停时计算其所需的高度。请参阅working Js Fiddle

var contentHeight = $('.two').children('div').outerHeight();
$('.two').css('max-height', contentHeight + 'px')

上述解决方案可能会满足您的所有需求。但是，目前还不清楚您愿意使用javascript的程度。

在另一个div下面滑下新的div

2 个答案:

更多javascript：）