為什么當父 div 的高度降低到 0 時子 div 沒有被刪除？

Question

我對 HTML 和 CSS 非常陌生。 所以請多多包涵。

我有一個header div，其中包含一個nav div，其中包含一個li div。 我試圖實現一個隱藏header的按鈕。 我可以隱藏header ，但我仍然可以看到nav和li div。

以下是 css 屬性：

#header {
  z-index: 100;
  left:0;
  top: 0px;
  height: 60px;
  transition: max-height 0.2s ease-out;
  width: 100%;
  position: fixed;
    nav {
       max-width: 650px;
       margin: 0 auto;
       padding: 0 10px;
       li {
          font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: normal;
          list-style: none;
          display: inline;
          color: white;
          line-height: 50px;
       }
    }
}

上面是一個 Jekyll scss文件，生成了對應的css 。 JavaScript function如下：

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    console.log(content.innerHTML);
    if (content.style.height){
      content.style.height = null;
    } else {
      content.style.height = content.scrollHeight + "px";
    } 
  });
}

謝謝。

Answer 1

請使用顯示屬性作為無。 它也會隱藏子 div。 像這樣使用： display: 'none';