为什么点击汉堡菜单无法正常切换ul元素的显示隐藏状态

问题原因 #

你用来绑定点击事件的汉堡菜单是 <a> 标签元素，它的 href 属性为空，点击后会触发标签默认的页面跳转行为：空 href 会默认重新加载当前页面。你的JS切换菜单显示状态的逻辑刚执行完成，页面就刷新重置了所有DOM状态，所以会出现ul元素仅短暂消失的问题。

解决步骤 #

1. 阻止标签的默认跳转行为 #

你可以选择以下任意一种方案修改：

• 方案一：给onclick事件添加返回false阻止默认行为
  修改HTML中汉堡按钮的代码为：

  <a href="" class="menu" id="menu" onclick="displayMenu(); return false;"><i class="fa fa-bars fa-2x"></i></a>
  

• 方案二：给<a>标签的href属性赋值为javascript:void(0) 禁用跳转
  修改为：

  <a href="javascript:void(0)" class="menu" id="menu" onclick="displayMenu()"><i class="fa fa-bars fa-2x"></i></a>
  

• 方案三（更推荐）：将汉堡菜单改为语义化的<button>元素，本身没有默认跳转行为，不需要额外处理跳转问题：

  <button class="menu" id="menu" onclick="displayMenu()"><i class="fa fa-bars fa-2x"></i></button>
  

  如果你用这个方案，需要额外给.menu类加一点CSS重置按钮默认样式：

  .menu {
    background: none;
    border: none;
    cursor: pointer;
    /* 原有其他样式保持不变 */
    color: #C70D6C;
    position: absolute;
    top: 6px;
    right: 10px;
    line-height: 50px;
    display: none;
  }
  

2. 补充移动端菜单默认隐藏的CSS规则 #

你当前的CSS没有给移动端的ul菜单设置默认隐藏，打开页面时菜单会默认展示，不符合汉堡菜单的交互逻辑，在媒体查询中添加对应规则即可：

@media screen and (max-width: 767.98px) { 
    .menu {
        display: inline-block;
    }
    /* 新增移动端默认隐藏菜单 */
    nav ul {
        display: none;
    }
}

3. 可选优化JS代码（非必须） #

如果需要更稳妥的判断逻辑，可以用getComputedStyle获取元素最终生效的样式，避免内联样式和CSS样式冲突导致的判断失效：

function displayMenu() {
    let list = document.getElementById('list');
    const computedStyle = window.getComputedStyle(list);
    list.style.display = computedStyle.display === "none" ? "block" : "none";
}

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