Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

点击按钮，JS功能可以将班级从''切换到hidden。

现在，问题在于overflow:hidden始终隐藏文字intro_page_caption和intro_main_text。

此外，目前我的网页最初显示两个div（homepage以及intro_page）。点击该按钮，隐藏了homepage，intro_page取代了它。

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

我想实现两件事：

文字intro_page_caption以及intro_main_text应该可见。
intro_page在homepage可见时应该不可见，反之亦然。

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

您正在应用height: 0px，并且转换将消失到页面上的所有div，包括div与您的＆＃34;关于＆＃34;内容。所以只用你的css {/ 1>定位#homepage div

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: