jQuery实现响应式汉堡菜单点击无法开合？750px断点下导航功能失效求助

• jQuery 选择器语法错误：原代码使用$("menu-toggle")匹配元素，这是在查找标签名为menu-toggle的DOM节点，实际汉堡按钮是携带menu-toggle类的<i>标签，缺少类选择器的.前缀，导致点击事件根本没有绑定到按钮上。
• 无效DOM选择：原代码中$('nav').toggleClass('showing')逻辑无任何作用，因为HTML结构内不存在<nav>标签，主导航容器是class为nav的<ul>元素，选择器完全失配。
• CSS权重不匹配：媒体查询内定义的.showing { max-height: 100em; }权重低于同规则下的header ul { max-height: 0px; }，就算showing类被加上，max-height属性也会被高权重的折叠规则覆盖，菜单无法展开。
• 类切换目标错配：原代码中给$('.nav ul')添加showing类，该选择器匹配的是.nav内部嵌套的用户下拉子菜单，并非需要控制开合的外层主导航<ul>。

调整后的jQuery交互逻辑 #

$(document).ready(function() {
  // 修正类选择器，绑定正确的按钮元素
  $(".menu-toggle").on("click", function() {
    // 直接给外层主导航容器切换showing类
    $('.nav').toggleClass('showing');
  });
});

调整后的CSS样式规则 #

header .menu-toggle {
  display: none;
}


/***** 媒体查询规则 *****/
@media only screen and (max-width: 750px) {
  header {
    position: relative;
  }
  header ul.nav {
    width: 100%;
    background: #666666;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  /* 提高选择器权重，保证展开状态能覆盖默认折叠值 */
  header ul.nav.showing {
    max-height: 100em;
  }
  header ul li {
    width: 100%;
  }
  header ul li ul {
    position: static;
    display: block;
    width: 100%;
  }
  header ul li ul li a {
    padding: 10px;
    background: #666666;
    color: #ffffff;
    padding-left: 50px;
  }
  header ul li ul li a.logout {
    color: #ff0000;
  }
  header .menu-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 1.9em;
    cursor: pointer;
  }
}

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