JS实现适合于后台使用的动画折叠菜单效果

首先，为了实现动画折叠菜单效果，我们需要使用JavaScript和CSS。

第一步：HTML结构

首先，我们需要在HTML中创建折叠菜单的基本结构。对于每个一级菜单，我们都要创建一个<div>元素，并将其内容包含在一个<a>元素中。在这个链接标记后面，我们要创建一个空的<ul>元素，用于存放子菜单。我们还需要为每个菜单项添加一个class属性，以便稍后在CSS中轻松地引用它们。

第二步：CSS样式

接下来，我们需要为菜单项和子菜单设置一些基本的CSS样式。我们要给菜单的父元素添加一些固定的样式，包括设置宽度、高度、边框和背景颜色等。对于子菜单，我们要定义一些隐藏和显示的CSS样式，这样我们就可以在需要时轻松地切换它们的可见性。

第三步：JavaScript代码

一旦我们的HTML和CSS都已准备好，就可以编写JavaScript代码来实现折叠菜单的动画了。我们需要为每一个一级菜单项设置一个单击事件，当单击时触发展开或收缩子菜单的动画。在展开和收缩子菜单时，我们将同时应用CSS过渡效果，以使动画更加平滑。

示例一：单级菜单

<div class="menu">
  <a href="#">一级菜单1</a>

  <ul>
    <li><a href="#">二级菜单1</a></li>
    <li><a href="#">二级菜单2</a></li>
    <li><a href="#">二级菜单3</a></li>
  </ul>
</div>

.menu {
  width: 200px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

.menu li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

.menu li a:hover {
  background-color: #e5e5e5;
}

const menus = document.querySelectorAll('.menu');
menus.forEach(menu => {
  const link = menu.querySelector('a');
  const subMenu = menu.querySelector('ul');

  link.addEventListener('click', e => {
    e.preventDefault();

    if (subMenu.style.display === 'none') {
      subMenu.style.display = 'block';
    } else {
      subMenu.style.display = 'none';
    }
  });
});

示例二：多级菜单

<div class="menu">
  <a href="#">一级菜单1</a>

  <ul>
    <li><a href="#">二级菜单1</a></li>
    <li>
      <a href="#">二级菜单2</a>

      <ul>
        <li><a href="#">三级菜单1</a></li>
        <li><a href="#">三级菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">二级菜单3</a></li>
  </ul>
</div>

const menus = document.querySelectorAll('.menu');
menus.forEach(menu => {
  const links = menu.querySelectorAll('a');
  links.forEach(link => {
    const subMenu = link.nextElementSibling;

    if (subMenu) {
      link.addEventListener('click', e => {
        e.preventDefault();

        if (subMenu.style.display === 'none') {
          subMenu.style.display = 'block';
        } else {
          subMenu.style.display = 'none';
        }
      });
    }
  });
});

在这个例子中，我们需要对一级菜单和二级菜单项进行单击事件处理，以便展开和收缩子菜单。当我们单击一个二级菜单项时，我们还需要检查它是否有子菜单，如果有的话，我们需要展开或收缩它的子菜单。