为什么 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 函数通过单击按钮将 class 从 '' 切换到 hidden。

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

此外，目前我的网页最初同时显示了 div（homepage 和 intro_page）。单击按钮时，homepage 被隐藏，intro_page 取而代之。

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

我想实现两件事：

文本 intro_page_caption 以及 intro_main_text 应该可见。

homepage

intro_page 应该不可见，反之亦然。

Answer 1

您需要更改三元运算符

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

至此

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

CSS规则不能为空，see visbility rules to set it.

Answer 2

您正在对页面上的所有 div 应用 height: 0px 和消失的过渡，包括带有您的 "about" 内容的 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>

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

Why is text inside div getting hidden?

html

javascript

css

webpage