如何在html中创建下拉页面

时间:2015-07-12 22:32:51

标签: html

我正在访问这个网站,他们有一个部分,你点击页面底部的这个图标,在它下面将删除同一网页上的新页面部分。有人能告诉我这是怎么做的。这是一个隐藏的iframe正在被使用?我只需要知道要搜索什么来学习如何做到这一点。我搜索了隐藏的下拉页面,但到目前为止,我只是找到了如何做下拉导航链接的教程。

1 个答案:

答案 0 :(得分:1)

隐藏的iframe通常用于从其他网站提取内容。在揭示您自己网站的某些部分时,您可以使用CSS隐藏这些部分,并在某些事件中取消隐藏它们,如悬停,类更改,鼠标点击等...

这是一个使用height: 0隐藏它的超简单示例,然后更改类会将高度修改为200像素:



function reveal(){
  document.getElementById('h').className = 'open';
}

div {height: 50px; background: green; color: white;}
#h {height: 0; transition: height 1s linear; background: blue}
#h.open {height: 50px}

<div>I'm a regular part of the page<br><button onclick="reveal()">Open the "hidden" part</button></div>
<div id="h">I'm the hidden part of the page</div>
&#13;
&#13;
&#13;

这应该足以让您入门 - 在线提供有关此主题的数百万资源。