如何用JavaScript实现移动端导航栏展开收起？现有代码失效求助

嘿，我一眼就看出你的代码问题出在哪了——jQuery选择器没加标识符，而且逻辑只做了“展开”没做“收起”，咱们来一步步修复：

问题分析 #

1. 选择器错误：原代码里的$('btnMob')和$('btnMob0')是无效的jQuery选择器。jQuery中，选择ID元素需要在前面加#，选择类元素要加.。你原代码相当于在找<btnMob>和<btnMob0>这种不存在的标签，所以点击事件根本没绑定到正确元素上，自然没效果。
2. 逻辑单一：只用addClass('active')只会给元素添加类，没法实现“点击收起”的功能，应该用切换类的方法。

正确实现方案 #

1. 补全HTML结构（确保元素标识正确）

<!-- menu mobile -->
<nav class="menuMobile">
  <!-- 点击触发的按钮，给它加ID btnMob -->
  <div class="toggle" id="btnMob">☰ 菜单</div>
  <!-- 需要展开收起的ul，默认隐藏 -->
  <ul id="btnMob0">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品列表</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

2. 完善CSS样式

/* 默认隐藏移动端菜单 */
.menuMobile #btnMob0 {
  display: none;
  margin: 10px 0;
  padding-left: 0;
  list-style: none;
}

/* 激活状态下显示菜单 */
.menuMobile #btnMob0.active {
  display: block !important;
}

/* 给切换按钮加样式，提示可点击 */
.menuMobile .toggle {
  cursor: pointer;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

3. 修正JavaScript代码

$(document).ready(function(){
  // 用#btnMob选择点击按钮，绑定点击事件
  $('#btnMob').click(function(){
    // 用toggleClass替代addClass，实现展开/收起的切换
    $('#btnMob0').toggleClass('active');
  });
});

额外优化（可选） #

如果需要点击页面其他区域自动收起菜单，可以额外添加这段监听代码：

$(document).click(function(e){
  // 判断点击区域是否在菜单容器内，不在则收起
  if(!$(e.target).closest('.menuMobile').length){
    $('#btnMob0').removeClass('active');
  }
});

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