js 实现的收缩菜单

收缩菜单的实现方法

收缩菜单通常指可以展开和折叠的导航菜单，以下是几种常见的实现方式。

使用CSS和JavaScript切换类

通过JavaScript切换CSS类来控制菜单的显示和隐藏。

<div class="menu">
  <button class="menu-toggle">Toggle Menu</button>
  <ul class="menu-items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

.menu-items {
  display: none;
}
.menu-items.active {
  display: block;
}

document.querySelector('.menu-toggle').addEventListener('click', function() {
  document.querySelector('.menu-items').classList.toggle('active');
});

使用jQuery实现动画效果

如果需要平滑的动画效果，可以使用jQuery的滑动动画。

$('.menu-toggle').click(function() {
  $('.menu-items').slideToggle();
});

使用Vue.js实现响应式菜单

在Vue.js中，可以利用数据绑定和条件渲染实现菜单的收缩。

<div id="app">
  <button @click="toggleMenu">Toggle Menu</button>
  <ul v-show="isMenuOpen">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    isMenuOpen: false
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
});

使用React实现状态控制

在React中，可以通过状态管理来控制菜单的显示和隐藏。

function Menu() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
      {isOpen && (
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      )}
    </div>
  );
}

使用CSS过渡效果增强用户体验

为菜单添加CSS过渡效果，使其展开和折叠更加平滑。

.menu-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.menu-items.active {
  max-height: 500px;
}

注意事项

• 确保菜单在移动设备上表现良好，可能需要添加触摸事件支持。
• 考虑无障碍访问，为按钮添加适当的ARIA属性。
• 如果菜单内容动态加载，注意在切换时处理异步数据。

以上方法可以根据具体需求和技术栈选择适合的实现方式。