javascript - 为什么div中的文本被隐藏了？

Question

function clicked(IdClicked) {
  var ElementClicked = document.getElementById(IdClicked);
  ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';
}

div.hidden {
  height: 500px;
}
div {
  height: 0px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
  overflow: hidden;
}

<span onclick="clicked('homepage'); ">About</span>
. . .
<div id="homepage" class='hidden'>
    <h1>Home Page</h1>
</div>
<div id="intro_page">
  <h1 id="intro_page_caption">About Me</h1>
  <p id="intro_main_text">I enjoy reading, swimming, jogging, painting and exploring.</p>
  <figure class="intro_pic1">
      <img src="img/award.jpg" alt="Receiving Award" height="250"/>
    <figcaption>Award 2015</figcaption>
  </figure>
</div>

单击按钮时，JS 函数将类从 '' 切换到 hidden。

现在，问题是 overflow:hidden 使文本 intro_page_caption 和 intro_main_text 始终完全隐藏。

此外，目前我的网页最初显示了两个 div(homepage 以及 intro_page)。单击按钮时，主页 被隐藏，intro_page 取而代之。

我已经尝试过将高度更改为各种值，但它并没有解决问题。

我想实现两件事:

1. 文本 intro_page_caption 以及 intro_main_text 应该是可见的。

当 homepage 可见时，

2. intro_page 应该是不可见的，反之亦然。

Answer 1

您正在应用 height: 0px 和消失的过渡到页面上的所有 div，包括带有您的 div “关于”的内容。所以只用你的 css 定位 #homepage div

function clicked(IdClicked) {
  var ElementClicked = document.getElementById(IdClicked);
  ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';

}

#homepage.hidden {
  height: 500px;
}
#homepage {
  height: 0px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
  overflow: hidden;
}

<span onclick="clicked('homepage'); ">About</span>
. . .
<div id="homepage" class='hidden'>
    <h1>Home Page</h1>
</div>
<div id="intro_page">
  <h1 id="intro_page_caption">About Me</h1>
  <p id="intro_main_text">I enjoy reading, swimming, jogging, painting and exploring.</p>
  <figure class="intro_pic1">
      <img src="img/award.jpg" alt="Receiving Award" height="250"/>
    <figcaption>Award 2015</figcaption>
  </figure>
</div>