我知道这可能是一个以前被问过的问题，但我还没有找到解决这个问题的帖子或其他问题。
我想通过切换#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结果，结果都是一样的。
任何帮助将非常感激。感谢您的时间。
DIEA
相关分类