1

想法是这样的：顶部的 div 默认情况下是隐藏的，并且会向下滑动，通过单击按钮来推送其他内容。再次单击将滑动 div 再次隐藏，提升其他内容。

HTML

<div id="topDiv" class="hidden">
    Some content<br>
    More very complex content
</div>
<button id="thebutton" onclick="toggle('topDiv');">Toggle the div</button>
<div id="bottomDiv">
    Some content<br>
    More content!<br>
    Even more content!<br>
</div>

CSS

div.hidden {
    height: 0px;
}
div {
    height: 400px;
    transition: height 0.5s;
}

Javascript

function toggle(someId) {
    var someElem = document.getElementById(someId);
    someElem.className = someElem.className == 'hidden' ? '' : 'hidden';
}

这里的问题是显示了我想要隐藏的 div 的内容。如果我改变div.hidden为有display: none;或visibility: hidden;然后我失去了“滑动”效果。

我想要一个不使用 jQuery 的解决方案。

4

1 回答 1

9

overflow:hidden在 div 上添加。

于 2013-04-12T19:20:32.230 回答