如何隱藏和顯示錶格行（css表格）

我想隱藏和顯示錶格行使用css表格和純JavaScript（沒有jQuery）。如何隱藏和顯示錶格行（css表格）

我有一個div與display設置爲table-row和nav裏面。無論我做什麼，border-collapse等，div仍然保持一定的高度。

任何想法？

HTML：

<!-- Header --> 
    <header id='header'> <!-- Table Row 1 --> 
    <div id="header-table"> 
     <div id='back'> 
     <button id='back-button'>&#8592;</button> 
     </div> 
     <div id="title"> 
     <h1 id='title-h1'>Title</h1> 
     </div> 
     <div id="menu"> 
     <button id='menu-button'>&equiv;</button> 
     </div> 
    </div> 
    </header> 

    <nav id="menu-nav"> 
     <a href="#intro">Introductory Page</a> 
     <a href="#list">Activity List</a> 
     <a href="#settings">Settings</a> 
     <a href="#about">About</a> 
    </nav> 

    <div id="body"> <!-- Table Row 3 --> 

    <div id="wrapper">

CSS

header#header { 
    position: relative; 
    display: table-row; 
} 

div#menu-nav-cell { 
    position: relative; 
    display: table-row; 
    text-align: center; 
    overflow: hidden; 
    background: yellow; 
} 

nav#menu-nav { 
    display: table-row; 
    height: 0em; 
    width: 100%; 
    color: #000; 
    background: pink; 
} 


div#body { 
    position: relative; 
    display: table-row; 
    height: 100%; 
} 

div#wrapper { 
    position: relative; 
    height: 100%; 
}

來源

2014-07-22 Costa

你能告訴我們一個例子嗎？ –

爲什麼不直接使用display: none？

也許我誤解了，因爲你說你有一個div與nav裏面，但我不能在你的html示例中看到。

我想你想顯示/隱藏導航。

nav#menu-nav.hidden { 
    display: none; 
}

和JavaScript

document.getElementById("toggle").onclick = function() { 
    document.getElementById("menu-nav").classList.toggle("hidden"); 
}

jsFiddle

如果你想動畫的高度，你可以這樣做：這可以通過添加這個CSS規則來執行

/* new rules that I added */ 
nav#menu-nav { 
    line-height: 1em; 
    -webkit-transition: line-height .2s, background-color .2s; 
} 

nav#menu-nav a { 
    display: inline-block; 
    overflow: hidden; 
    height: 1em; 
    -webkit-transition: height .2s; 
} 

nav#menu-nav.hidden { 
    line-height: 0em; 
    background-color: transparent; 
} 
nav#menu-nav.hidden a { 
    height: 0; 
}

訣竅是將overflow: hidden; display:inline-block用於表格單元格，而不是display:table-cell。這樣，將高度和線高更改爲零就可以正常工作。

但仍然有一些高度（大約3px）仍然可見，所以我決定讓background-color的動畫也變爲透明。如果你評論那個背景顏色動畫的部分，你會理解我的意思。

jsFiddle v2

來源

2014-08-10 07:11:45

顯示器無法工作，但不能用css轉換動畫。 – Costa

@Costa請檢查我的更新 –

如何隱藏和顯示錶格行（css表格）

回答

相關問題