如何使导航栏从1024像素的屏幕尺寸折叠

@media screen and (max-width: 1024px) {
  /* 在1024像素及以下的屏幕尺寸应用以下样式 */
  .navbar {
    display: none; /* 隐藏导航栏 */
  }
  
  .menu-icon {
    display: block; /* 显示用于展开导航栏的菜单图标 */
  }
  
  .menu {
    display: none; /* 隐藏折叠的导航菜单 */
  }
}

<div class="navbar">
  <!-- 导航栏内容 -->
</div>

<div class="menu-icon">
  <!-- 用于展开导航菜单的菜单图标 -->
</div>

<div class="menu">
  <!-- 折叠的导航菜单内容 -->
</div>

var menuIcon = document.querySelector('.menu-icon');
var menu = document.querySelector('.menu');

menuIcon.addEventListener('click', function() {
  menu.classList.toggle('active'); /* 切换导航菜单的显示状态 */
});

.navbar {
  /* 导航栏样式 */
}

.menu-icon {
  /* 菜单图标样式 */
}

.menu {
  display: none; /* 默认隐藏导航菜单 */
}

.menu.active {
  display: block; /* 当菜单图标被点击时显示导航菜单 */
}