为什么当高度设置为 0 时我的 div 仍然显示？

Question

我知道这可能是一个以前被问过的问题，但我还没有找到解决这个问题的帖子或其他问题。

我想通过切换#mobileMenu div的高度来使用Javascript制作一个下拉移动菜单。我希望 div 在加载文档时的初始高度为 0，并在单击触发按钮时添加其全高。唯一的问题是当我将 div 的初始高度设置为 0 时，文档仍然显示 div 的高度27.59px对我来说没有多大意义。

我试过添加：overflow: hidden; / line-height: 0; / display: block但无论我做什么，div 的高度都不会低于 27.59px。我什至完成了 Javascript 功能，并且 div 将打开到 154px 的高度，但是当它关闭时它会回到27.59px而不是 0。

const openBtn = document.querySelector('.open');

const closeBtn = document.querySelector('.close');

const mobileMenu = document.getElementById('mobileMenu');

openBtn.addEventListener('click', e => {

  mobileMenu.classList.remove('hidden');

  mobileMenu.classList.add('active');

  openBtn.style.display = 'none';

  closeBtn.style.display = 'block';

});

closeBtn.addEventListener('click', e => {

  mobileMenu.classList.remove('active');

  mobileMenu.classList.add('hidden');

  openBtn.style.display = 'block';

  closeBtn.style.display = 'none';

});

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  position: relative;

}

/* Header */

header {

  display: flex;

  justify-content: space-around;

  align-items: center;

  padding: .5rem;

  height: 60px;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

}

header h2 {

  font-family: 'Calistoga';

  letter-spacing: 2px;

}

header i {

  font-size: 1.5rem;

}

header i:hover {

  cursor: pointer;

}

header i.close {

  display: none;

}

/* Mobile Nav */

#mobileMenu {

  padding: .8rem 0;

  border-top: 1px solid #000;

  border-bottom: 1px solid #000;

  position: fixed;

  top: 92px;

  left: 0;

  right: 0;

  overflow: hidden;

  transition: height .7s ease-in-out;

}

#mobileMenu.hidden {

  height: 0;

  line-height: 0;

  display: block;

}

#mobileMenu.active {

  height: 154px;

}

.mobile-nav {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  list-style: none;

}

.mobile-nav li {

  padding: .3rem 0;

}

不管有没有overflow: hidden; / line-height: 0; / display: block结果，结果都是一样的。

任何帮助将非常感激。感谢您的时间。

Answer 1

尝试在 mobileMenu div 上设置 hidden 属性，并在单击按钮时相应更新。这样你就可以避免弄乱 css 类const openBtn = document.querySelector('.open');const closeBtn = document.querySelector('.close');const mobileMenu = document.getElementById('mobileMenu');openBtn.addEventListener('click', e => {&nbsp; mobileMenu.hidden = false;&nbsp; //mobileMenu.classList.add('active');&nbsp; openBtn.style.display = 'none';&nbsp; closeBtn.style.display = 'block';});closeBtn.addEventListener('click', e => {&nbsp; //mobileMenu.classList.remove('active');&nbsp; mobileMenu.hidden = true;&nbsp; openBtn.style.display = 'block';&nbsp; closeBtn.style.display = 'none';});* {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; box-sizing: border-box;}body {&nbsp; position: relative;}/* Header */header {&nbsp; display: flex;&nbsp; justify-content: space-around;&nbsp; align-items: center;&nbsp; padding: .5rem;&nbsp; height: 60px;&nbsp; position: fixed;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;}header h2 {&nbsp; font-family: 'Calistoga';&nbsp; letter-spacing: 2px;}header i {&nbsp; font-size: 1.5rem;}header i:hover {&nbsp; cursor: pointer;}header i.close {&nbsp; display: none;}/* Mobile Nav */#mobileMenu {&nbsp; padding: .8rem 0;&nbsp; border-top: 1px solid #000;&nbsp; border-bottom: 1px solid #000;&nbsp; position: fixed;&nbsp; top: 92px;&nbsp; left: 0;&nbsp; right: 0;&nbsp; overflow: hidden;&nbsp; transition: height .7s ease-in-out;}#mobileMenu.hidden {&nbsp; height: 0;&nbsp; line-height: 0;&nbsp; display: block;}#mobileMenu.active {&nbsp; height: 154px;}.mobile-nav {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; list-style: none;}.mobile-nav li {&nbsp; padding: .3rem 0;}.mobile-nav li a {&nbsp; text-decoration: none;&nbsp; font-size: 1.2rem;&nbsp; color: #000;}<header>&nbsp; <h2>Website Header</h2>&nbsp; <i class="fas fa-chevron-down open"></i>&nbsp; <i class="fas fa-chevron-up close"></i></header><div id="mobileMenu" hidden>&nbsp; <ul class="mobile-nav">&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#">Home</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#">Services</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#">About</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#">Contact</a>&nbsp; &nbsp; </li>&nbsp; </ul></div>