Question

我正在尝试使用菜单和子菜单创建一个辅助导航。单击父菜单会显示子菜单。我的方法是使用嵌套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>

Answer 1

您遇到的问题是由于您只能以像素为单位设置高度的动画，因此您的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;
}

CSS转换无法在<ul>元素中的高度上运行

1 个答案: