javascript - 在动画侧边栏中隐藏子菜单

Question

我正在尝试使用 CSS 和 JS 创建一个动画侧边栏，但我遇到了隐藏子菜单的问题(demo 中的绿色)。所以，子菜单应该像现在这样慢慢飞出，但只有在父级 <li> 时才会出现。悬停。目前，它们始终存在。此外，在悬停的 <li> 下方列出元素应适当下移。在这种情况下，当“交易”悬停时，交易子菜单应该缓慢出现并占用空间，因此“预算”相应地向下移动。我用 display: none; 做了一些尝试和 display: block;但我读到动画不适用于 display属性(property)，无法让它工作，我真的很想保留动画。我也尝试过 visibility但失败了，不值一提。

document.addEventListener('DOMContentLoaded', () => {
  let listItems = document.querySelectorAll('nav > ul > li');

  function onListItemClick() {
    for (let listItem of listItems) {
      listItem.classList.remove('active');
      listItem.children[0].classList.remove('dot');
      if (listItem.children.length > 2) {
        listItem.children[2].style.display = 'none';
      }
    }
    this.classList.add('active');
    this.children[0].classList.add('dot');
    if (this.children.length > 2) {
      this.children[2].style.display = 'block';
    }
  }
  listItems.forEach(function(listItem) {
    listItem.addEventListener('click', onListItemClick);
  });
});

.sidebar {
  background-color: #F2F2F2;
  width: 300px;
  height: 100%;
  position: fixed;
  font-family: sans-serif;
}

.sidebar>nav>ul {
  list-style: none;
  line-height: 2em;
  padding: 0;
  margin: 10em 0 0 0;
}

.sidebar>nav>ul>li {
  display: grid;
  grid-template-columns: 25px 1fr;
  color: #959595;
  font-size: 18px;
}

.sidebar>nav>ul>li>span:nth-child(1) {
  margin-left: 3em;
}

.sidebar>nav>ul>li>span:nth-child(2) {
  padding: 0.5em 0 0.5em 3em;
}

.sidebar>nav>ul>li:hover {
  color: #757575;
  font-weight: bold;
  cursor: pointer;
}

.sidebar>nav>ul>li>ul {
  z-index: 9;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 300px;
  transform: translateY(0);
  transition: all 0.5 ease;
}

.sidebar>nav>ul>li:hover>ul {
  transform: translateY(30%);
  transition: all 0.5s ease;
}

.sidebar>nav>ul>li>ul>li {
  display: block;
  box-sizing: border-box;
  background-color: #33ad93;
  font-size: 14px;
  width: 100%;
  font-weight: normal;
  padding: 0 0 0 5.5em;
}

.sidebar>nav>ul>li>ul>li:first-child {
  padding: 0.5em 0 0 5.5em;
}

.sidebar>nav>ul>li>ul>li:last-child {
  padding: 0 0 0.5em 5.5em;
}

.sidebar>nav>ul>li>ul>li:not(:first-child):not(:last-child) {
  padding: 0.15em 0 0.15em 5.5em;
}

.sidebar>nav>ul>li>ul>li>a {
  color: white;
}

.sidebar>nav>ul>li>span>a {
  color: #959595;
  text-decoration: none;
}

.dot {
  border-radius: 50%;
  background-color: #33ad93;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: auto;
}

.active {
  color: black !important;
  font-weight: bold;
}

<div class="sidebar">
  <nav>
    <ul>
      <li class=" active ">
        <span class=" dot "></span>
        <span><a href="/dashboard/">Dashboard</a></span>
      </li>
      <li class="">
        <span class=""></span>
        <span>Transactions</span>
        <ul>
          <li><a href="/transactions/create/">New Transaction</a></li>
          <li>View Transactions</li>
        </ul>
      </li>
      <li class="">
        <span class=""></span>
        <span>Budgets</span>
      </li>
    </ul>
  </nav>
</div>

我该如何解决这个问题？

Answer 1

我做了一些小改动，似乎可以实现你想要的:

.sidebar > nav > ul > li > ul {
    z-index: 9;
    /*position: absolute;  *removed*/
    height: 0; /*added*/
    list-style: none;
    padding: 0;
    margin: 0;
    width: 300px;
    /*transform: translateY(0);  *removed*/
    /*transition: all 0.5 ease;  *removed*/
    overflow-y: hidden; /*added*/
}

.sidebar > nav > ul > li:hover > ul {
    /*transform: translateY(30%);  *removed*/
    height: 80px; /*added*/
    transition: height 0.5s ease; /*modified*/
}

.sidebar > nav > ul > li > ul > li {
    height: 40px; /*added*/
    display: block;
    box-sizing: border-box;
    background-color: #33ad93;
    font-size: 14px;
    width: 100%;
    font-weight: normal;
    padding: 0 0 0 5.5em;
}

所以我将每个新下拉列表项的静态高度添加到 40px，然后将容器设置为 80px。然后我们转换高度而不是 Y 位置。如果你希望它相对于元素的数量是动态的，不幸的是它不像使用 height: 100% 而不是 height: 80px 那么容易(你需要使用一些 javascript 来动态设置相对于列表项数量的高度；它仍然有效，但转换会稍微中断)。

希望这能给你一个想法