如何在 html 中创建下拉页面 [关闭]

Question

我正在访问这个网站，他们有这个部分，您单击页面底部的这个图标，在它下面会在同一网页上放置一个新的页面部分。有人能告诉我这是怎么做的吗？它是一个隐藏的 iframe 正在使用吗？我只需要知道要搜索什么来学习如何做到这一点。我已经搜索了隐藏的下拉页面，但到目前为止，我只是在寻找有关如何进行下拉导航链接的教程。

Answer 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>

这应该足以让您入门 - 网上有数百万关于此主题的资源。