如何隐藏和显示表行（css-tables） [英] How to hide and show a table-row (css-tables)

问题描述

我尝试使用css-tables和纯JavaScript（无jQuery）隐藏和显示表格行。

我有一个

和，将显示设置为 c> nav 里面。无论我做什么， border-collapse 等， div 仍然保持一些它的高度。

有任何想法吗？

HTML：

 <！ -  Header  - > 
< header id ='header'> <！ - 表行1  - > 
< div id =header-table> 
< div id ='back'> 
< button id ='back-button'>&＃8592;< / button> 
< / div> 
< div id =title> 
< h1 id ='title-h1'>标题< / h1> 
< / div> 
< div id =menu> 
< button id ='menu-button'>& equiv;< / button> 
< / div> 
< / div> 
< / header> 
 
< nav id =menu-nav> 
< a href =＃intro>介绍页< / a> 
< a href =＃list>活动列表< / a> 
< a href =＃settings>设置< / a> 
< a href =＃about>关于< / a> 
< / nav> 
 
< div id =body> <！ - 表行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％; 
} 
  

解决方案

c $ c> display：none ？

也许我误解了，因为你说你有一个 div 里面有一个 nav ，但我在你的HTML示例中看不到。

想显示/隐藏导航。这可以通过添加这个css规则来实现：

  nav＃menu-nav.hidden {
 display：none; 
} 
  

和javascript

  document.getElementById（toggle）。onclick = function（）{
 document.getElementById（menu-nav）。classList.toggle（hidden）; 
} 
  

jsFiddle

---

动画的高度，你可以这样做：

  / *新规则，我添加* / 
 nav＃ 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）仍然可见，所以我决定以将背景颜色动画化为透明。

jsFiddle v2

I'm trying to hide and show a table row using css-tables and pure JavaScript (No jQuery).

I've got a div with the display set to table-row and a nav inside of it. No matter what I do, border-collapse etc, the div still maintains some of it's height.

Any ideas?

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%;
}

解决方案

Why not simply using display: none?

Maybe I misunderstood, since you said you have a div with a nav inside, but I cannot see that in your html sample.

I think you want to show/hide the navigation. This can be done by adding this css rule:

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

and javascript

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

jsFiddle

---

If you want to animate the height, you can do this:

/* 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;
}

The trick is to use overflow: hidden; display:inline-block for the table cells, instead of display:table-cell. This way, changing the height and line-height to zero works fine.

However there is still some height (around 3px) still visible, so I decided to animate the background-color to transparent as well. If you comment that part that animates the background color, you will understand what I mean.

jsFiddle v2

这篇关于如何隐藏和显示表行（css-tables）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！