<分区>
<分区>
我正在尝试创建一个带有菜单和子菜单的 sidenav。 单击父菜单将显示子菜单。我的做法是使用嵌套的ul，子菜单ul的高度设置为0；然后在点击父菜单时添加高度，并在高度上进行过渡。但不知何故，过渡不起作用。 改变高度需要 0.5 秒，但它很突然，现在我们希望它如何使用过渡发生。 链接到 jsfiddle
这里是示例代码
document.querySelector('.has-sub').addEventListener('click', toggleSubmenu)
function toggleSubmenu() {
let subMenu = document.querySelector(".sub-menu");
subMenu.classList.toggle("show-submenu");
}.navLinks {
font-weight: 500;
margin-top: 10%;
width: 100%;
}
.navLinks ul {
text-decoration: none;
}
.navLinks ul li {
text-decoration: none;
display: block;
padding: 1em 0.5em;
width: 100%;
color: #132f63;
cursor: pointer;
}
.navLinks ul li:hover {
background-image: linear-gradient(to right, #dfe0fc, rgb(243, 243, 243));
}
.sub-menu {
height: 0;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
width: 100%;
padding-left: 2em;
}
.sub-menu li {
width: 100%;
}
.sub-menu li:hover {
background-image: linear-gradient(to right, #d6d8ff, rgb(243, 243, 243));
}
.show-submenu {
height: 100%;
}<div class="navLinks">
<ul>
<li>Operations</li>
<li class="has-sub">
Service Analytics
<ul class="sub-menu">
<li>Incidents</li>
<li>Problems</li>
<li>Change Request</li>
<li>Service Request</li>
</ul>
</li>
<li>CIO</li>
<li>Solarwinds</li>
</ul>
</div>最佳答案
您遇到的问题是因为您只能以像素为单位设置动画高度，因此您的 css 需要像
.sub-menu {
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
width: 100%;
padding-left: 2em;
}
.show-submenu {
height: 100px;
}
或者如果 ul 没有固定大小
.sub-menu {
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
width: 100%;
padding-left: 2em;
}
.show-submenu {
height: 100%;
max-height: 500px;
}
关于javascript - CSS Transition 不适用于 <ul> 元素中的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56690240/