javascript - 为什么当高度设置为 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;
}

.mobile-nav li a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
}

<header>
  <h2>Website Header</h2>
  <i class="fas fa-chevron-down open"></i>
  <i class="fas fa-chevron-up close"></i>
</header>

<div id="mobileMenu" class="hidden">
  <ul class="mobile-nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>

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

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

标签： javascripthtmlcss

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 => {
  mobileMenu.hidden = false;
  //mobileMenu.classList.add('active');
  openBtn.style.display = 'none';
  closeBtn.style.display = 'block';
});

closeBtn.addEventListener('click', e => {
  //mobileMenu.classList.remove('active');
  mobileMenu.hidden = true;
  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;
}

.mobile-nav li a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
}

<header>
  <h2>Website Header</h2>
  <i class="fas fa-chevron-down open"></i>
  <i class="fas fa-chevron-up close"></i>
</header>

<div id="mobileMenu" hidden>
  <ul class="mobile-nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>