為什么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 ）。 單擊該按鈕， homepage被隱藏，而intro_page取代了它。

我已經嘗試過將高度更改為各種值，但是並不能解決問題。

我想實現兩件事：

1. 文本intro_page_caption和intro_main_text應該可見。

2. 當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規則不能為空， 請參閱可見性規則進行設置。

Answer 2

您要套用height: 0px ，過渡將消失到頁面上的所有div ，包括具有“ 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>