如何让div.logo与a.menu同排显示 修复导航过渡及菜单图标切换问题

问题1：div.logo与a.menu移动端同一行显示 #

问题出在媒体查询中给nav设置了flex-direction: column，导致nav下的三个子元素（logo、menu、ul）全部竖向排列，修改方案无需改动HTML结构，直接改CSS即可：

@media screen and (max-width: 890px) {
  nav {
    /* 删掉原有flex-direction: column，替换为下面两行 */
    flex-direction: row;
    flex-wrap: wrap;
  }
  ul {
    width: 100%;
    margin-top: 20px;
  }
  /* 原有其他媒体查询样式保留 */
}

问题2：下拉过渡效果不生效 #

CSS的transition无法对display: none/block的切换生效，需要改用max-height控制菜单显隐，调整方案如下：

1. 删掉原有.responsive-li相关的CSS和JS逻辑，改为控制ul的类名
2. 新增CSS：

ul {
  /* 原有ul样式保留，新增下面三行 */
  transition: max-height 0.3s ease;
  max-height: unset;
  overflow: visible;
}
@media screen and (max-width: 890px) {
  ul {
    max-height: 0;
    overflow: hidden;
  }
  ul.active {
    /* 数值大于菜单实际最大高度即可，按需调整 */
    max-height: 300px;
  }
  .nav-item {
    /* 删掉原有display: none，替换为下面的 */
    display: flex;
    width: 100%;
  }
  /* 原有其他媒体查询样式保留 */
}

问题3：点击菜单切换X图标 #

你写的切换代码被注释了，解除注释后补全回退汉堡图标的逻辑即可，修改后的JS代码：

const menu = document.querySelector('.menu')
const navList = document.querySelector('nav ul')

menu.addEventListener('click', () => {
  navList.classList.toggle('active')
  // 图标切换逻辑
  if(navList.classList.contains('active')){
    menu.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="45" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
      </svg>`
  } else {
    menu.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="45" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
            </svg>`
  }
});

内容的提问来源于stack exchange，提问作者Vansh